我希望能够滚动整个页面,但不显示滚动条。
在Google Chrome中,它是:
::-webkit-scrollbar {
display: none;
}
但Mozilla Firefox和Internet Explorer似乎不是这样工作的。
我也在CSS中尝试过:
overflow: hidden;
这确实隐藏了滚动条,但我不能再滚动了。
有没有一种方法可以删除滚动条,同时仍然可以滚动整个页面?
请只使用CSS或HTML。
我希望能够滚动整个页面,但不显示滚动条。
在Google Chrome中,它是:
::-webkit-scrollbar {
display: none;
}
但Mozilla Firefox和Internet Explorer似乎不是这样工作的。
我也在CSS中尝试过:
overflow: hidden;
这确实隐藏了滚动条,但我不能再滚动了。
有没有一种方法可以删除滚动条,同时仍然可以滚动整个页面?
请只使用CSS或HTML。
当前回答
使用此选项可以隐藏滚动条,但保留功能:
.example::-webkit-scrollbar {
display: none;
}
隐藏IE、Edge和Firefox的滚动条
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
其他回答
要隐藏内容溢出的元素的滚动条,请使用。
.div{
scrollbar-width: none; /* The most elegant way for Firefox */
}
Use:
<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内容(如果将来有)。每个浏览器可以为其各自的栏设置不同的特定属性。
对于Microsoft Edge,使用:-ms溢出样式:-ms自动隐藏滚动条;或-ms溢出样式:无;根据MSDN。
Firefox没有同等的功能。尽管有一个jQuery插件来实现这一点,http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
以下内容适用于我在Microsoft、Chrome和Mozilla上的特定div元素:
div.rightsidebar {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar {
width: 0 !important;
}
我加了这个,它对我有用
-ms溢出样式:无;/*IE和Edge*/滚动条宽度:无;/*Firefox浏览器*/
裁判:https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp
这对我来说适用于简单的CSS财产:
.container {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
对于旧版本的Firefox,请使用:overflow:-moz滚动条none;