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

Question

我希望能够滚动通过整个页面，但没有滚动条显示。

在Google Chrome中是：

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

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

我也在CSS中尝试过这个：

overflow: hidden;

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

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

请使用CSS或HTML。

Answer 1

这对我来说适用于简单的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；

Answer 2

它在WebKit中很容易实现，具有可选的样式：

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

Answer 3

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

#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工作小提琴

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