我希望能够滚动整个页面,但不显示滚动条。
在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。
当前回答
在现代浏览器上,您可以使用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;
});
其他回答
我碰巧在我的项目中尝试了上述解决方案,由于某些原因,由于div定位,我无法隐藏滚动条。因此,我决定通过引入一个表面覆盖滚动条的div来隐藏滚动条。下面的示例适用于水平滚动条:
<div id="container">
<div id="content">
My content that could overflow horizontally
</div>
<div id="scroll-cover">
</div>
</div>
对应的CSS如下:
#container{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#content{
width: 100%;
height: 100%;
overflow-x: scroll;
}
#scroll-cover{
width: 100%;
height: 20px;
position: absolute;
bottom: 0;
background-color: #fff; /*change this to match color of page*/
}
如果出于某种原因,您希望使用box模型:border box,则向内部div添加填充(如当前接受的答案)将不起作用。
在这两种情况下都有效的方法是将内部div的宽度增加到100%加上滚动条的宽度(假设溢出:隐藏在外部div上)。
例如,在CSS中:
.container2 {
width: calc(100% + 19px);
}
在JavaScript中,跨浏览器:
var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';
这对我有用
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 */
}
我加了这个,它对我有用
-ms溢出样式:无;/*IE和Edge*/滚动条宽度:无;/*Firefox浏览器*/
裁判:https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp
以下内容适用于我在Microsoft、Chrome和Mozilla上的特定div元素:
div.rightsidebar {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar {
width: 0 !important;
}