如何隐藏默认样式的滚动条，当我使用overflow:scroll;

How to hide the default style scroll bar, when I use overflow:scroll;

本文关键字：overflow scroll 滚动条 何隐藏 隐藏 样式 默认      更新时间：2023-09-26

我想实现的效果是能够滚动页面，但不滚动条

要隐藏默认滚动条，可以使用:

::-webkit-scrollbar { 
    display: none; 
}

我以前遇到过这个问题，上面的问题在除了IE以外的所有浏览器中都有效，所以你可以使用一个"hack":

body, div, html{
    height:100%;
    width:100%;
    padding:0;
    margin:0;
}
body{
    overflow:hidden;
    position:fixed;
}
div{
    overflow-y:scroll;
    position:relative;
    right:-20px;
}
<div>
    content<br />
    content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
    
</div>

这允许没有滚动条，但保持内容可滚动

相关文章：