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

Posted 2023-02-22

【中文标题】隐藏滚动条但不停止滚动[重复]

【英文标题】：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? 或 ***.com/questions/16670931/… 的可能副本

我问是否可以通过css完成，并且只指定一个div。

第二个链接有一个纯 CSS 的答案。作为记录，您的问题中没有任何内容表明它必须是纯 CSS 的答案。标签用于排序。 jsfiddle.net/5GCsJ/954

【参考方案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 库可以实现很多不错的额外功能