我希望能够滚动整个页面,但不显示滚动条。
在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。
当前回答
scrollbar-width: none;
为我工作。
其他回答
另一种黑客方法是执行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事件的精彩文章。这可能对你有用,但绝对不是一个优雅的解决方案。
HTML格式:
<div class="parent">
<div class="child">
</div>
</div>
CSS:
.parent{
position: relative;
width: 300px;
height: 150px;
border: 1px solid black;
overflow: hidden;
}
.child {
height: 150px;
width: 318px;
overflow-y: scroll;
}
相应地应用CSS。
在这里检查(在Internet Explorer和Firefox中测试)。
我遇到了这个问题,解决起来非常简单。
取两个容器。内部将是可滚动的容器,外部显然将容纳内部:
#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }
它非常简单,适用于任何浏览器。
只是一个测试,效果很好。
#parent{
width: 100%;
height: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}
工作Fiddle
JavaScript:
由于不同浏览器的滚动条宽度不同,最好使用JavaScript处理。如果执行Element.offsetWidth-Element.clientWidth,将显示精确的滚动条宽度。
JavaScript工作Fiddle
Or
使用位置:绝对,
#parent{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}
工作Fiddle
JavaScript工作Fiddle
信息:
基于这个答案,我创建了一个简单的滚动插件。
以下内容适用于我在Microsoft、Chrome和Mozilla上的特定div元素:
div.rightsidebar {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar {
width: 0 !important;
}