我希望能够滚动整个页面,但不显示滚动条。
在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。
当前回答
.className::-webkit-scrollbar{
display: none;
}
除了“溢出”之外,你写的所有内容都是正确的。适用于Chrome和其他浏览器的webkit
overflow-y: scroll;
or
overflow-y: auto;
对于Firefox和Edge
scrollbar-width: none;
or
scrollbar-width: thin;
其他回答
要隐藏内容溢出的元素的滚动条,请使用。
.div{
scrollbar-width: none; /* The most elegant way for Firefox */
}
Use
function reloadScrollBars() {
document.documentElement.style.overflow = 'auto'; // Firefox, Chrome
document.body.scroll = "yes"; // Internet Explorer only
}
function unloadScrollBars() {
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // Internet Explorer only
}
对于您想要加载、卸载或重新加载滚动条的任何点,调用这些函数。当我在Chrome中测试它时,它仍然可以在Chrome中滚动,但我不确定其他浏览器。
只需将子对象的宽度设置为100%,将填充设置为15像素,将overflow-x设置为滚动和溢出:为父对象隐藏,并设置您想要的宽度。
它适用于所有主要浏览器,包括Internet Explorer和Edge,但Internet Explorer 8及更低版本除外。
只需将其添加到CSS文件中:
"&::-webkit-scrollbar": {
display: "none",
width: 0
},
"-ms-oveflow-style": "none" /* Internet Explorer and Edge */,
"scrollbar-width": "none" /* Firefox */,
我只是想分享一个组合片段,用于隐藏开发时使用的滚动条。这是一组在互联网上找到的对我有用的片段:
.container {
overflow-x: scroll; /* For horiz. scroll, otherwise overflow-y: scroll; */
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
scrollbar-width: none;
}
.container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}