隐藏滚动条，但仍能够滚动。

23 浏览
0 Comments

隐藏滚动条，但仍能够滚动。

我想要能够滚动整个页面，但是不显示滚动条。

在 Google Chrome 中，可以使用以下方法：

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

但是 Mozilla Firefox 和 Internet Explorer 似乎不像这样工作。

我还尝试了以下 CSS：

overflow: hidden;

这确实隐藏了滚动条，但我无法再滚动。

有没有办法在仍然能够滚动整个页面的情况下移除滚动条？

只用 CSS 或 HTML，谢谢。

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

这对我来说可以通过简单的 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;

0
0 Comments

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

#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：

由于不同浏览器中滚动条的宽度不同，最好使用 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 演示链接

信息：

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

0