隐藏滚动条，但仍然可以滚动

Question

我希望能够滚动整个页面，但不显示滚动条。

在谷歌浏览器中它是：

 ::-webkit-scrollbar {
    display: none;
}

但是 Mozilla Firefox 和 Internet Explorer 似乎不是那样工作的。

我也在 CSS 中尝试过这个：

 overflow: hidden;

那确实隐藏了滚动条，但我不能再滚动了。

有没有一种方法可以在仍然能够滚动整个页面的同时删除滚动条？

请使用 CSS 或 HTML。

原文由 Oussama el Bachiri 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只是一个工作正常的测试。

 #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 */
}

工作小提琴

脚本：

由于不同浏览器的滚动条宽度不同，所以最好用JavaScript来处理。如果您执行 Element.offsetWidth - Element.clientWidth ，则会显示确切的滚动条宽度。

JavaScript 工作小提琴

或者

使用 Position: absolute ，

 #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;
}

工作小提琴

JavaScript 工作小提琴

信息：

基于这个答案，我创建了一个 简单的滚动插件。

原文由 Mr_Green 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这适用于我的简单 CSS 属性：

 .container {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.container::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

对于旧版本的 Firefox，请使用： overflow: -moz-scrollbars-none;

原文由 Hristo Eftimov 发布，翻译遵循 CC BY-SA 4.0 许可协议