怎么隐藏overflow-x: auto下面的滚动条

本文介绍了一个简单的移动端网页水平滚动菜单的实现方法,包括HTML结构搭建和CSS样式设置,通过设置特定的类名来实现水平滚动效果。

//温馨提示:此代码实现的效果只能在开发者工具的移动端页面,才能实现滚动效果

//html代码,

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<!-- 引入css样式代码 -->

<link rel="stylesheet" href="./css/style.css">

</head>

<body>

<div class="scrollx mescroll-touch-x">

<nav id="scrollxContent" class="scrollx-content">

<ul id="nav" class="nav">

<li class="active">推荐</li>

<li>视频</li>

<li>热点</li>

<li>社会</li>

<li>娱乐</li>

<li>军事</li>

<li>推荐</li>

<li>推荐</li>

<li>推荐</li>

<li>推荐</li>

<li>推荐</li>

<li>推荐</li>

<li>推荐</li>

</ul>

</nav>

</div>

</body>

</html>

 

//css代码

// 导航

.scrollx{

overflow: hidden;

position: relative;

// 先给总的盒子设置一个高度

height: 0.6rem;

.scrollx-content{

width: 100%;

// 再在子集盒子设置overflow-x: auto;让盒子水平方向具有滚动效果

overflow-x: auto;

// 禁止换行

white-space: nowrap;

// height: .6rem;

background:@navBGColor;

border: .01rem sloid @navBDColor;

// overflow: hidden;

ul{

padding: 0 16px 0 10px;

li{

display:inline-block;

font-size: .25rem;

line-height: .59rem;

padding:0 .2rem;

margin-bottom: 30px;

&.active{

color:@navActiveFontColor;

}

}

}

}

}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值