我希望能够滚动整个页面,但不显示滚动条。
在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。
当前回答
另一种黑客方法是执行overflow-y:hidden,然后手动滚动元素,如下所示:
function detectMouseWheelDirection(e) {
var delta = null, direction = false;
if (!e) { // If the event is not provided, we get it from the window object
e = window.event;
}
if (e.wheelDelta) { // Will work in most cases
delta = e.wheelDelta / 60;
} else if (e.detail) { // Fallback for Firefox
delta = -e.detail / 2;
}
if (delta !== null) {
direction = delta > 0 ? -200 : 200;
}
return direction;
}
if (element.addEventListener) {
element.addEventListener('DOMMouseScroll', function(e) {
element.scrollBy({
top: detectMouseWheelDirection(e),
left: 0,
behavior: 'smooth'
});
});
}
deepmikoto的博客中有一篇关于如何检测和处理onmousewheel事件的精彩文章。这可能对你有用,但绝对不是一个优雅的解决方案。
其他回答
要隐藏内容溢出的元素的滚动条,请使用。
.div{
scrollbar-width: none; /* The most elegant way for Firefox */
}
只需将其添加到CSS文件中:
"&::-webkit-scrollbar": {
display: "none",
width: 0
},
"-ms-oveflow-style": "none" /* Internet Explorer and Edge */,
"scrollbar-width": "none" /* Firefox */,
这个帖子已经得到了很多人的回复,但我觉得它的解决方案可能会简单得多。
/* Hide scrollbar for Chrome, Safari and Opera */
.container::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for Internet Explorer, Edge and Firefox */
.container {
-ms-overflow-style: none; /* Internet Explorer and Edge */
scrollbar-width: none; /* Firefox */
}
}
注意:上面的方法只会删除滚动条的可见性,但它仍然可以正常工作。如果您想删除滚动功能,则可以使用以下选项:
container {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
以下Sass样式应使滚动条在大多数浏览器上透明(不支持Firefox):
.hide-scrollbar {
scrollbar-width: thin;
scrollbar-color: transparent transparent;
&::-webkit-scrollbar {
width: 1px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
}
在现代浏览器上,您可以使用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;
});