我希望能够滚动整个页面，但不显示滚动条。
在Google Chrome中，它是：
::-webkit-scrollbar {
display: none;
}
但Mozilla Firefox和Internet Explorer似乎不是这样工作的。
我也在CSS中尝试过：
overflow: hidden;
这确实隐藏了滚动条，但我不能再滚动了。
有没有一种方法可以删除滚动条，同时仍然可以滚动整个页面？
请只使用CSS或HTML。
当前回答
这对我有用
div {
-ms-overflow-style: none; /* Edge, Internet Explorer */
scrollbar-width: none; /* Firefox */
overflow-y: scroll;
}
// hides scrollbars while allowing to scroll
div::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
其他回答
另一个简单的工作小提琴：
#maincontainer {
background: orange;
width: 200px;
height: 200px;
overflow: hidden;
}
#childcontainer {
background: yellow;
position: relative;
width: 200px;
height: 200px;
top: 20px;
left: 20px;
overflow: auto;
}
父容器上隐藏溢出，子容器上自动溢出。易于理解的
要隐藏内容溢出的元素的滚动条，请使用。
.div{
scrollbar-width: none; /* The most elegant way for Firefox */
}
这对我有用：
scroll-content {
overflow-x: hidden;
overflow-y: scroll;
}
scroll-content::-webkit-scrollbar {
width: 0;
}
只需将其添加到CSS文件中：
"&::-webkit-scrollbar": {
display: "none",
width: 0
},
"-ms-oveflow-style": "none" /* Internet Explorer and Edge */,
"scrollbar-width": "none" /* Firefox */,
在现代浏览器上，您可以使用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;
});
