【CSS】css实现移动端或手机网页上溢出滚动但隐藏滚动条的原理和方法

要实现可以滚动但又不显示滚动条的原理很简单,只要在外面再套一个盒子,想办法把滚动条挤出盒子外隐藏掉就好了

下面以导航栏允许横向滚动不显示滚动条的方法为例:

<div style="overflow:hidden;height:60px;">
	<div style="overflow-x:scroll;width:400px;">
		<ul style="width:800px;border:1px solid #666;overflow:hidden;">
			<li style="width:100px;height:40px;float:left;line-height: 40px;">实现</li>
			<li style="width:100px;height:40px;float:left;line-height: 40px;">滚动</li>
			<li style="width:100px;height:40px;float:left;line-height: 40px;">隐藏</li>
			<li style="width:100px;height:40px;float:left;line-height: 40px;">滚动条</li>
			<li style="width:100px;height:40px;float:left;line-height: 40px;">的</li>
			<li style="width:100px;height:40px;float:left;line-height: 40px;">方法</li>
			<li style="width:100px;height:40px;float:left;line-height: 40px;">Mickey</li>
			<li style="width:100px;height:40px;float:left;line-height: 40px;">CSDN</li>
		</ul>
	</div>
</div>


隐藏侧面滚动条原理和方法是一样的

猜你喜欢

转载自blog.csdn.net/yu17310133443/article/details/79668009