特殊情况下会有隐藏滚动条但是内容很长时要可以滚动的需求，当然可以通过插件来实现，但会给人杀鸡用牛刀的感觉，在此记录下使用 css 处理该需求的实现方式
最常用的方式
这种方式简单不需要改变元素本身样式结构，不过缺点是火狐和ie不支持。如果对兼容性不在乎首推此种方式。
<!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>css 实现隐藏滚动条的同时还支持滚动</title>
<style>
.container {
width: 350px;
height: 200px;
position: relative;
overflow: auto;
border: 1px solid #ccc;
}
.container::-webkit-scrollbar { width: 0 !important }
.container {
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
</style>
</head>
<body>
<div class="container">
<div class="inner-container">
<p>1这是一段话，啦啦啦啦啦啦啦啦啦</p>
<p>2这是一段话，啦啦啦啦啦啦啦啦啦</p>
<p>3这是一段话，啦啦啦啦啦啦啦啦啦</p>
<p>4这是一段话，啦啦啦啦啦啦啦啦啦</p>
<p>5这是一段话，啦啦啦啦啦啦啦啦啦</p>
<p>6这是一段话，啦啦啦啦啦啦啦啦啦</p>
<p>7这是一段话，啦啦啦啦啦啦啦啦啦</p>
<p>8这是一段话，啦啦啦啦啦啦啦啦啦</p>
<p>9这是一段话，啦啦啦啦啦啦啦啦啦</p>
<p>10这是一段话，啦啦啦啦啦啦啦啦啦</p>
</div>
</div>
</body>
</html>兼容性最好的方式
看到网上不少是用几个div设置绝对定位等方式，个人觉得会影响元素本身的布局。而下面的方法是我手动调试时发现的，个人觉得此方法简介有效，并且对元素本身影响微乎其微。并在谷歌，火狐，safari，edge，ie等浏览器通过测试。
<!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>css 实现隐藏滚动条的同时还支持滚动</title>
<style>
.outer-container {
height: 200px;
overflow: hidden; /* 关键 */
border: 1px solid rgb(175, 161, 161);
}
.content {
height: 100%;
margin-right: -17px; /* 关键 */
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="outer-container">
<div class="content">
<p>1这是一段话，啦啦啦啦啦啦啦啦啦</p>
<p>2这是一段话，啦啦啦啦啦啦啦啦啦</p>
<p>3这是一段话，啦啦啦啦啦啦啦啦啦</p>
<p>4这是一段话，啦啦啦啦啦啦啦啦啦</p>
<p>5这是一段话，啦啦啦啦啦啦啦啦啦</p>
<p>6这是一段话，啦啦啦啦啦啦啦啦啦</p>
<p>7这是一段话，啦啦啦啦啦啦啦啦啦</p>
<p>8这是一段话，啦啦啦啦啦啦啦啦啦</p>
<p>9这是一段话，啦啦啦啦啦啦啦啦啦</p>
<p>10这是一段话，啦啦啦啦啦啦啦啦啦</p>
</div>
</div>
</body>
</html>
发表评论：