css隐藏滚动条保留滚动功能（兼容edge、火狐）

最新推荐文章于 2024-04-14 00:48:11 发布

一朵小浪花儿

最新推荐文章于 2024-04-14 00:48:11 发布

阅读量620

点赞数

文章标签： css3 css html javascript edge

本文链接：https://blog.csdn.net/spray_wave/article/details/108282918

版权

话不多说，上代码
html示例代码：

<div class="scrollbar">
	<div class="content">
		<ul>
			test,test,test
		</ul>
	</div>
</div>

css代码如下：

.scrollbar{
	height:100vh;
	overflow-y:auto;
	-ms-overflow-style:none; //兼容Edge
	scrollbar-width: none;//兼容火狐
}
//chrome需要使用伪类
.scrollbar::-webkit-scrollbar{
	display:none;
}


//以下是为了产生滚动条加的样式，不重要请忽略
.content{
	height:1000px;
	width:200px;
	background:red;
}
ul{
	background-color: aqua;
	margin:10px;
}