【问题标题】：Hidding scrollbar but not stoping scrolling [duplicate]隐藏滚动条但不停止滚动[重复]
【发布时间】：2014-11-02 22:57:24
【问题描述】：

有没有办法隐藏滚动条，但仍然保留向上/向下滚动的选项？我尝试溢出：隐藏；它删除了滚动条，但我无法滚动。

【问题讨论】：

How can I disable a browser or element scrollbar, but still allow scrolling with wheel or arrow keys? 或 stackoverflow.com/questions/16670931/… 的可能副本
我问是否可以通过css完成，并且只指定一个div。
第二个链接有一个纯 CSS 的答案。作为记录，您的问题中没有任何内容表明它必须是纯 CSS 的答案。标签用于排序。 jsfiddle.net/5GCsJ/954

标签： html css

【解决方案1】：

是的，这当然是可能的，而且相当容易。假设我们有两个名为 inner-div 和 outer-div 的 div：

.outer-div {
    width: 200px;
    height: 300px;
    overflow: hidden;
}

.inner-div {
    width: 215px; //Width of it's parent + 15px (the average width of a scrollbar)
    height: 300px;
    overflow: scroll;
}

inner-div 比外部 div 宽一点（15 像素）。 outer-div 具有属性 overflow: hidden;。滚动条将不可见，因为它正好位于outer-div 之外，但您仍然可以滚动。我没有测试它，但你明白了。

【讨论】：

【解决方案2】：

DEMO

标记：

<section>
   <article>
      <p></p>
      <p></p>
   </article>
</section>

风格：

*{
    box-sizing: border-box;
}
section{
    width:480px;
    height:320px;
    overflow:hidden;
    margin:0 auto;
    border: 2px solid #ccc;
    position: relative;
}
article{
    height: 100%;
    overflow-y: auto;
    width: 500px;
    padding: 20px 40px 20px 20px;
}

【讨论】：

【解决方案3】：

如果你想在没有插件的情况下这样做：

HTML

<div id="content">
    <div id="scrollable"> ... ... ... </div>
</div>

CSS

#content {
    position: relative;
    width: 200px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}
#scrollable {
   height: 150px;   
   width: 218px; /* #content.width + 18px */
   overflow-y: scroll;    
}

但是，有很多 jquery 库可以实现很多不错的额外功能

【讨论】：