我希望能够滚动整个页面,但不显示滚动条。
在谷歌浏览器中它是:
::-webkit-scrollbar {
display: none;
}
但是 Mozilla Firefox 和 Internet Explorer 似乎不是那样工作的。
我也在 CSS 中尝试过这个:
overflow: hidden;
确实隐藏了滚动条,但我不能再滚动了。
有没有一种方法可以删除滚动条,同时仍然能够滚动整个页面?
请使用 CSS 或 HTML。
最佳答案
只是一个运行正常的测试。
#parent{
width: 100%;
height: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}
JavaScript:
由于不同浏览器的滚动条宽度不同,最好用JavaScript来处理。如果您执行 Element.offsetWidth - Element.clientWidth
,则会显示确切的滚动条宽度。
或者
使用 Position: absolute
,
#parent{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}
信息:
基于这个答案,我创建了一个 simple scroll plugin .
关于html - 隐藏滚动条,但仍然可以滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50654711/