我希望能够滚动整个页面,但不显示滚动条。
在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。
当前回答
您可以使用下面的代码隐藏滚动条,但仍可以滚动:
.element::-webkit-scrollbar {
width: 0 !important
}
其他回答
只需编写以下代码:
::-webkit-scrollbar {
width: 0px;
}
Or
::-webkit-scrollbar {
display: none;
}
要隐藏内容溢出的元素的滚动条,请使用。
.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中滚动,但我不确定其他浏览器。
这是一个类似于divitis的解决方案,所有浏览器都可以使用它。。。
标记如下所示,需要位于具有相对定位的内部(其宽度应设置为400像素):
<div class="hide-scrollbar">
<div class="scrollbar">
<div class="scrollbar-inner">
</div>
</div>
</div>
CSS:
.hide-scrollbar {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.scrollbar {
overflow-y: scroll;
position: absolute;
top: 0;
left: 0;
right: -50px;
bottom: 0;
}
.scrollbar-inner {
width: 400px;
}
这对我有用:
scroll-content {
overflow-x: hidden;
overflow-y: scroll;
}
scroll-content::-webkit-scrollbar {
width: 0;
}