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

Question

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

在谷歌浏览器中：

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

但是Mozilla Firefox和Internet Explorer似乎无法正常工作。 我也在CSS中尝试过：

overflow: hidden;

那确实隐藏了滚动条，但我无法滚动了。 有什么办法可以删除滚动条，同时仍然可以滚动整个页面？ 仅使用CSS或HTML。请帮助我。

转载于:https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll

Answer 1

Just a test which is working fine.

#parent{
    height: 100%;
    width: 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 */
}

Working Fiddle

JavaScript:

Since, the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth, the exact scrollbar width will show up.

JavaScript Working Fiddle

or

Using Position: absolute,

#parent{
    height: 100%;
    width: 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;
}

Working Fiddle

JavaScript Working Fiddle

Info:

Based on this answer, I created a simple scroll plugin. I hope this will help someone.