隐藏滚动条但不停止滚动[重复]

Question

有没有一种方法可以隐藏滚动条，但仍然保留向上/向下滚动的选项？我尝试溢出：隐藏；它删除滚动条，但我不能滚动。

Answer 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比outer-div(15个像素）宽一点。outer-div具有属性overflow：hidden；。滚动条将是不可见的，因为它正好落在outer-div的外面，但您仍然可以滚动。我没试过，但你明白了。

Answer 2

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

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库可以支持很多很好的额外功能

Answer 3

标记：

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