CSS 如何做到隐藏滚动条的同时可以滚动

版权声明：本文为博主原创文章，未经博主允许不得转载。如果对你有帮助，那真是再好不过啦~ https://blog.csdn.net/SCU_Cindy/article/details/82778031

一个页面，当div的高度固定时，里面内容如果过多，将会产生溢出，从而影响整体的美观。这时候，我们一般会设置以下CSS样式，为页面添加滚动条。

overflow: auto / scroll;
/** 单独为横向和竖向设置滚动条 **/
overflow-x: auto / scroll;
overflow-y: auto / scroll;

有一种场景是页面内部包裹了很多个组件，页面本身具有滚动条，组件内部又由于高度问题设置滚动条，这时候就会出现双滚动条的情况，某方面来说，会很累赘，同样影响页面美观。因此，我们需要在满足页面可滚动的同时去掉滚动条。这里我们使用以下自定义滚动条的伪对象选择器 ::-webkit-scrollbar。

.element::-webkit-scrollbar {display:none}

如果要兼容 PC 其他浏览器（IE、Firefox 等），可以使用以下方法。在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样，就变相隐藏了。

 <div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        </div>
     </div>
 </div>

.outer-container,.content {
	width: 200px; 
	height: 200px;
}
.outer-container {
    position: relative;
    overflow: hidden;
}
.inner-container {
    position: absolute; 
    left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}
 /* for Chrome */
.inner-container::-webkit-scrollbar {
    display: none;
}

如此便可实现隐藏。

---

参考文献： Hiding Vertical Scrollbars with Pure CSS in Chrome, IE (6+), Firefox, Opera, and Safari

最后，希望对你有所帮助。愿安。