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

【问题标题】：Disable vertical scroll bar on div overflow: auto在 div 溢出时禁用垂直滚动条：auto
【发布时间】：2011-11-30 14:02:32
【问题描述】：

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

【问题讨论】：

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

标签： html css scroll scrollbar

【解决方案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; 
    }

【讨论】：