我希望能够滚动整个页面,但不显示滚动条。
在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。
当前回答
这适用于我的跨浏览器。然而,这不会在移动浏览器上隐藏本机滚动条。
在SCSS中
.hide-native-scrollbar {
scrollbar-width: none; /* Firefox 64 */
-ms-overflow-style: none; /* Internet Explorer 11 */
&::-webkit-scrollbar { /** WebKit */
display: none;
}
}
在CSS中
.hide-native-scrollbar {
scrollbar-width: none; /* Firefox 64 */
-ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
display: none;
}
其他回答
.className::-webkit-scrollbar{
display: none;
}
除了“溢出”之外,你写的所有内容都是正确的。适用于Chrome和其他浏览器的webkit
overflow-y: scroll;
or
overflow-y: auto;
对于Firefox和Edge
scrollbar-width: none;
or
scrollbar-width: thin;
另一个简单的工作小提琴:
#maincontainer {
background: orange;
width: 200px;
height: 200px;
overflow: hidden;
}
#childcontainer {
background: yellow;
position: relative;
width: 200px;
height: 200px;
top: 20px;
left: 20px;
overflow: auto;
}
父容器上隐藏溢出,子容器上自动溢出。易于理解的
.your-overflow-scroll-class::-webkit-scrollbar {
...
width: 0.5rem; //only hide the vertical scrollbar
height: 0px; //only hide the horizontal scrollbar
}
在现代浏览器上,您可以使用wheel事件:
// Content is the element you want to apply the wheel scroll effect to
content.addEventListener('wheel', function(e) {
const step = 100; // How many pixels to scroll
if (e.deltaY > 0) // Scroll down
content.scrollTop += step;
else // Scroll up
content.scrollTop -= step;
});
更新:
Firefox现在支持使用CSS隐藏滚动条,因此所有主要浏览器(Chrome、Firefox、Internet Explorer、Safari等)都已覆盖。
只需将以下CSS应用于要删除滚动条的元素:
.container {
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0;
}
这是我目前所知的最简单的跨浏览器解决方案。查看演示。
原始答案:
这是另一种尚未提及的方式。它非常简单,只涉及两个div和CSS。不需要JavaScript或专有CSS,它适用于所有浏览器。它也不需要显式设置容器的宽度,从而使其成为流体。
此方法使用负边距将滚动条移出父级,然后使用相同的填充量将内容推回到其原始位置。该技术适用于垂直、水平和双向滚动。
演示:
竖的水平的两个方向
垂直版本的示例代码:
HTML格式:
<div class="parent">
<div class="child">
Your content.
</div>
</div>
CSS:
.parent {
width: 400px;
height: 200px;
border: 1px solid #AAA;
overflow: hidden;
}
.child {
height: 100%;
margin-right: -50px; /* Maximum width of scrollbar */
padding-right: 50px; /* Maximum width of scrollbar */
overflow-y: scroll;
}