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

小编典典

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

html

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

在谷歌浏览器中：

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

但是Mozilla Firefox和Internet Explorer似乎无法正常工作。

我也在CSS中尝试过：

overflow: hidden;

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

有什么办法可以删除滚动条，同时仍然可以滚动整个页面？

请仅使用CSS或HTML。

阅读 358

2020-05-10

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

由于滚动条的宽度在不同的浏览器中会有所不同，因此最好使用JavaScript进行处理。如果这样做Element.offsetWidth - Element.clientWidth，将显示确切的滚动条宽度。

要么

使用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;
}

2020-05-10