在 div 溢出时禁用垂直滚动条：auto

Posted 2023-02-21

【中文标题】在 div 溢出时禁用垂直滚动条：auto

【英文标题】：Disable vertical scroll bar on div overflow: auto

【发布时间】：2011-11-30 14:02:32

【问题描述】：

使用overflow:auto（或scroll）时是否可以只允许水平滚动条？

【问题讨论】：

请注意，带有负值的margin-bottom 会与overflow-y: hidden 等混淆。

【参考方案1】：

这两个 CSS 属性可以用来隐藏滚动条：

overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal

【讨论】：

@Coulton Safari 和 chrome 怎么样？

根据this，它适用于 Safari，我知道它适用于 Chrome。

值得一提的是，如果隐藏溢出中有链接或输入元素，您仍然可以使用tab在div中滚动

【参考方案2】：

你应该只使用

overflow-y:hidden; - 用于隐藏垂直滚动

overflow-x:auto; - 使用它来显示水平滚动

Luke 提到两者都是隐藏的。所以我单独给出了这个。

【参考方案3】：

溢出：自动； 溢出-y：隐藏；

对于 IE8： -ms-overflow-y：隐藏；

否则：

隐藏 X：

<div style="height:150x; width:450px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;"></div>

隐藏 Y：

<div style="height:150px; width:450px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;"></div>

【参考方案4】：

如果您想同时在 Gecko（NS6+、Mozilla 等）和 IE4+ 中完成相同的操作，我相信这应该可以解决问题：V

body 
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: auto;

这将应用于整个 body 标签，请将其更新为您的相关 css 并应用此属性。

【参考方案5】：

速记法怎么样？

overflow: auto hidden;

【参考方案6】：

添加以下内容：

body
overflow-y:hidden;

【参考方案7】：

此规则适用于所有浏览器：

body overflow: hidden; 
body::-webkit-scrollbar  width: 0 !important; 
body  overflow: -moz-scrollbars-none; 
body  -ms-overflow-style: none; 

【参考方案8】：

如果你想禁用滚动条，但仍然可以滚动内部 DIV 的内容， 在css中使用下面的代码，

.divHideScroll::-webkit-scrollbar 
    width: 0 !important

.divHideScroll 
    overflow: -moz-scrollbars-none;

.divHideScroll 
    -ms-overflow-style: none;

divHideScroll 是目标 div 的类名。

它适用于所有主流浏览器（Chrome、Safari、Mozilla、Opera 和 IE）

【参考方案9】：

我用过这段代码

html, body
    
      -ms-content-zooming:none;  
      touch-action: none;
      content-zooming: none;
      overflow-y: hidden; // hide vertical
    overflow-x: hidden; 
    overflow-y: none; // hide vertical
    overflow-x: none;