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

本文翻译自：Hide scroll bar, but while still being able to scroll

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。

---

#1楼

参考：https://stackoom.com/question/17wrz/隐藏滚动条-但仍可以滚动

---

#2楼

Use: 使用：

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

This is a trick to somewhat overlap the scrollbar with an overlapping div which doesn't have any scroll bars: 这是使滚动条与没有任何滚动条的div重叠的一种技巧：

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

This is only for WebKit browsers... Or you could use browser-specific CSS content (if there is any in future). 这仅适用于WebKit浏览器...或者您可以使用特定于浏览器的CSS内容（如果将来有此内容）。 Every browser could have a different and specific property for their respective bars. 每个浏览器对于各自的栏可能具有不同的特定属性。

For Microsoft Edge use: -ms-overflow-style: -ms-autohiding-scrollbar; 对于Microsoft Edge，请使用： -ms-overflow-style: -ms-autohiding-scrollbar; or -ms-overflow-style: none; 或-ms-overflow-style: none; as per MSDN . 根据MSDN 。

There is no equivalent for Firefox. Firefox没有等效的功能。 Although there is a jQuery plugin to achieve this, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html 尽管有一个jQuery插件可以实现此目的，但http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

---

#3楼

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 . 基于此答案，我创建了一个简单的滚动插件 。

---

#4楼

Adding 新增中

    overflow: -moz-scrollbars-none;

worked for me. 为我工作。

---

#5楼

Another simple working fiddle : 另一个简单的工作提琴 ：

#maincontainer {
    background: orange;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

#childcontainer {
    background: yellow;
    position: relative;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 20px;
    overflow: auto;
}

Overflow hidden on the parent container, and overflow auto on the child container. 父容器隐藏了溢出，子容器隐藏了自动溢出。 Simple. 简单。

---

#6楼

This will be at the body: 这将是身体：

<div id="maincontainer" >
<div id="child">this is the 1st step</div>
<div id="child">this is the 2nd step</div>
<div id="child">this is the 3rd step</div>

And this is the CSS: 这是CSS：

#maincontainer
{
    background: grey;
    width: 101%;
    height: 101%;
    overflow: auto;
    position: fixed;
}

#child
{
    background: white;
    height:500px;
}