我希望能够滚动浏览整个页面,但不显示滚动条。
在谷歌浏览器中是这样的。
::-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 */
}
[工作小提琴][1]
由于滚动条的宽度在不同的浏览器中是不同的,所以最好用JavaScript来处理它。如果你做Element.offsetWidth - Element.clientWidth
,准确的滚动条宽度就会显示出来。
[JavaScript的工作方法][2]
使用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;
}
[工作的小提琴][3]
[JavaScript的工作提示][4]。
根据这个答案,我创建了一个简单滚动插件。
使用。
<div style='overflow:hidden; width:500px;'>
<div style='overflow:scroll; width:508px'>
My scroll-able area
</div>
</div>
这是一个将滚动条与没有任何滚动条的重叠div进行某种程度的重叠的技巧。
::-webkit-scrollbar {
display: none;
}
这只适用于WebKit浏览器... 或者你可以使用针对浏览器的CSS内容(如果将来有的话)。每个浏览器都可以为其各自的条形图设置不同的特定属性。
对于微软的Edge使用。-ms-overflow-style: -ms-autohiding-scrollbar;
或-ms-overflow-style: none;
如根据MSDN。
对于Firefox来说,没有相应的功能。 虽然有一个jQuery插件可以实现这个功能。 http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html