DEMO

Question

有没有办法隐藏滚动条，但仍然可以选择向上/向下滚动？我尝试溢出：隐藏; 它删除滚动条但我无法滚动。

Answer 1

DEMO

MARKUP：

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

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

是的，这当然是可行的，也很容易。假设我们有两个名为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之外，但您仍然可以滚动。我没有测试它，但你明白了。

隐藏滚动条但不停止滚动

3 个答案:

DEMO