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

时间:2016-08-26 08:19:45

标签: javascript html css

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

1 个答案:

答案 0 :(得分:0)

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

::-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>

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