隐藏滚动条，纯css实现
原理就是嵌套三层DOM节点，举例如下：第一层width：200px,第二层width：220px,多出来的20px就是大于滚动条的宽度，第三层就是现实的宽度，假定也是width：200px
div.class1>div.class2>div.class3
<!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>
<style>
.div1 {
width: 200px;
overflow-x: hidden;
display: inline-block
}
.ul {
height: 200px;
width: 280px; // 为了隐藏滚动条，一定要保证设置的宽度>带滚动条时的宽度
overflow-y: auto;
border: 1px solid red;
}
.li {
height: 20px;
width: 200px;
}
</style>
</head>
<body>
<div class="div1">
<div class="ul">
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
<div class="li">'123'</div>
</div>
</div>
</body>
</html>
此外也有一些针对性的写法，比如
.ul::-webkit-scrollbar {
/* 这种只会针对浏览器内核为webkit的浏览器生效,灵活性和兼容性较差 */
display: none；
}
网友评论