兼容纵向隐藏滚动条
参考文章:https://blog.csdn.net/wmy94827/article/details/73499579?locationNum=9&fps=1
此方法不太适用于水平滚动隐藏滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer-container,
.content {
width: 200px;
height: 200px;
}
.outer-container {
border: 1px solid red;
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: auto;
}
/* for Chrome */
.inner-container::-webkit-scrollbar {
display: none;
}
ul,li { // 需要清除ul和li自带的margin和padding值
margin: 0;
padding: 0;
}
.flex {
list-style: none;
line-height: 80px;
border: 1px solid yellow;
text-align: center;
}
</style>
</head>
<body>
<div class="outer-container">
<div class="inner-container">
<div class="content">
<ul>
<li class="flex">美妆</li>
<li class="flex">服饰</li>
<li class="flex">衣服</li>
<li class="flex">化妆品</li>
</ul>
</div>
</div>
</div>
</body>
</html>
以上代码火狐不兼容
重新参考一下链接实现
移动端水平滚动隐藏滚动条的兼容写法
https://www.cnblogs.com/shannen/p/14049111.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer-container,
.content {
width: 200px;
height: 200px;
}
.outer-container {
border: 1px solid red;
position: relative;
overflow: hidden;
}
.inner-container {
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: auto;
}
/* for Chrome */
.inner-container::-webkit-scrollbar {
display: none;
}
ul,
li {
margin: 0;
padding: 0;
}
.flex {
list-style: none;
line-height: 80px;
border: 1px solid yellow;
text-align: center;
}
</style>
</head>
<body>
<div class="outer-container">
<div class="inner-container">
<div class="content">
<ul>
<li class="flex">美妆</li>
<li class="flex">服饰</li>
<li class="flex">衣服</li>
<li class="flex">化妆品</li>
</ul>
</div>
</div>
</div>
</body>
</html>
以上可能有一些多余代码