html - 隐藏滚动条，但仍可以滚动(Hide scroll bar, but while still being able to scroll)

Question

I want to be able to scroll through the whole page, but without the scrollbar being shown.

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

In Google Chrome it's:

(在Google Chrome浏览器中：)

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

But Mozilla Firefox and Internet Explorer don't seem to work like that.

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

I also tried this in CSS:

(我也在CSS中尝试过：)

overflow: hidden;

That does hide the scrollbar, but I can't scroll any more.

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

Is there a way I can remove the scrollbar while still being able to scroll the whole page?

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

With just CSS or HTML, please.

(请仅使用CSS或HTML。)

  ask by Oussama el Bachiri translate from so

Answer 1

Just a test which is working fine.

(只是测试工作正常。)

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

Working Fiddle

(工作小提琴)

JavaScript: (JavaScript：)

Since the scrollbar width differs in different browsers, it is better to handle it with JavaScript.

(由于滚动条的宽度在不同的浏览器中会有所不同，因此最好使用JavaScript进行处理。)

If you do Element.offsetWidth - Element.clientWidth , the exact scrollbar width will show up.

(如果执行Element.offsetWidth - Element.clientWidth ，则会显示确切的滚动条宽度。)

JavaScript Working Fiddle

(JavaScript工作小提琴)

Or (要么)

Using Position: absolute ,

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

Working Fiddle

(工作小提琴)

JavaScript Working Fiddle

(JavaScript工作小提琴)

Information: (信息：)

Based on this answer, I created a simple scroll plugin .

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