我希望能够滚动整个页面，但不显示滚动条。
在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事件的精彩文章。这可能对你有用，但绝对不是一个优雅的解决方案。
其他回答
这对我来说适用于简单的CSS财产：
.container {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
对于旧版本的Firefox，请使用：overflow:-moz滚动条none；
这适用于我的跨浏览器。然而，这不会在移动浏览器上隐藏本机滚动条。
在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;
}
这是我如何做水平滚动；只有CSS，并且可以很好地与Bootstrap/col-*等框架配合使用。它只需要两个额外的div和设置了width或max width的父级：
如果您有触摸屏，您可以选择文本使其滚动或用手指滚动。
.overflow-x-scroll-no滚动条{溢出：隐藏；}.overflow-x-scroll-no-scrollbar div{overflow-x：隐藏；边距底部：-17px；overflow-y：隐藏；宽度：100%；}.overflow-x-scroll-no-scrollbar div*{溢出-x:自动；宽度：100%；填充底部：17px；空白：nowrap；光标：指针}/*下面的类只是为了使示例看起来更好*/.行{宽度：100%}.col-xs-4列{宽度：33%；浮动：左侧}.col-xs-3列{宽度：25%；浮动：左侧}.bg灰色{背景色：#DDDDD}.bg橙色{背景色：#FF9966}.bg蓝色{背景色：#6699FF}.bg橙色灯{背景色：#FFAA88}.bg蓝光{背景色：#88AAFF}<html><body><div class=“row”><div class=“col-xs-4 bg orange”>第1列</div>第2列</div><div class=“col-xs-4 bg blue”>第3列</div></div><div class=“row”><div class=“col-xs-4 bg橙色灯光”>内容1</div><div class=“col-xs-3溢出-x-scroll-no-scrollbar”>＜div＞＜div＞这个内容对于容器来说太长了，所以它需要隐藏，但不需要滚动条就可以滚动</div></div><div class=“col-xs-4 bg蓝光”>内容3</div></div></body></html>
懒人版：
.overflow-x-scroll-no滚动条{溢出：隐藏；}.overflow-x-scroll-no-scrollbar div{overflow-x：隐藏；边距底部：-17px；overflow-y：隐藏；宽度：100%；}.overflow-x-scroll-no-scrollbar div*{溢出-x:自动；宽度：100%；填充底部：17px；空白：nowrap；光标：指针}/*下面的类只是为了使示例看起来更好*/.父样式{宽度：100px；背景色：#FF9966}<div class=“父样式溢出-x-scroll-no-scrollbar”>＜div＞＜div＞这个内容对于容器来说太长了，所以它需要隐藏，但不需要滚动条就可以滚动</div></div>
更新：
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;
}
您可以使用下面的代码隐藏滚动条，但仍可以滚动：
.element::-webkit-scrollbar {
width: 0 !important
}
