CSS隐藏滚动条，保留滚动功能
原理：设置父级为溢出隐藏，而子级不进行溢出隐藏设置同时改变子级的宽度使进度条溢出到父级外面。
设置父级overflow:hidden;是为了使父级溢出隐藏。再设置子级的y轴方向可以滚动，然后设置子级的宽度使得滚动条溢出父级元素，达到隐藏滚动条的效果（实际上是滚动条溢出）
示例：
<!-- 设置外层标签的高度小于内层标签的高度，使滚动条出现 -->
<div style="height: 500px; border:solid 2px red; overflow-y:scroll;">
<div style="height: 1000px; border:solid 2px blue">
<div style="background-color:rebeccapurple">123</div>
</div>
</div>
效果：
红色的外层标签，蓝色的内层标签。因为内层标签的高度大于外层且外层设置了overflow:scorll；所以出现了滚动条。那么如何去掉滚动条呢，且保持可以滚动的效果呢？在外层在添加一个标签设置为overflow:hidden;然后调整宽度使子级的宽度右边溢出父级宽度，这样滚动条就被隐藏了，外层添加一个新标签设置overflow:hidden;是因为当子级溢出父级后会出现x轴方向的滚动条这与我们的目的不符。
<!DOCTYPE html>
<html lang="zh_CN">
<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>
.parent{
overflow: hidden;
}
.child{
width: 100%;
overflow-y:scroll;
padding-right: 50px;
}
</style>
</head>
<body>
<!-- 设置外层标签的高度小于内层标签的高度，是滚动条出现 -->
<div class="parent">
<div style="height: 500px; border:solid 2px red; overflow-y:scroll;" class="child">
<div style="height: 1000px; border:solid 2px blue">
<div style="background-color:rebeccapurple">123</div>
</div>
</div>
</div>
</body>
</html>
效果：
可以看到滚动条不见了且右面的外层标签的边框消失了，这就是隐藏滚动条且保持滚动的原理通过设置父级为超出隐藏，然后让子级超出父级将滚动条隐藏掉。这是基本原理，使用时灵活设置即可。
519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
