如何删除 div 中的水平滚动条？答案

【问题标题】：How do I remove the horizontal scrollbar in a div?如何删除 div 中的水平滚动条？
【发布时间】：2011-05-23 07:12:53
【问题描述】：

当我设置overflow: scroll 时，我会得到水平和垂直滚动条。

有没有办法去除 div 中的水平滚动条？

【问题讨论】：

标签： html css overflow horizontal-scrolling

【解决方案1】：

overflow-x: hidden;

【讨论】：

这是一个糟糕的解决方案。因为在这种情况下，您只需将水平滚动隐藏在容器中。但是如果这个容器太宽，你的内容将不适合你的容器。

【解决方案2】：

别忘了写overflow-x: hidden;

代码应该是：

overflow-y: scroll;
overflow-x: hidden;

【讨论】：

【解决方案3】：

CSS

overflow-y: scroll;

See it on jsFiddle.

请注意，如果您从 overflow-y 属性中删除 -y，则会显示水平滚动条。

【讨论】：

【解决方案4】：

使用overflow-y: scroll，即使不需要，垂直滚动条也会一直存在。如果您希望 y-scrollbar 仅在需要时可见，我发现这是可行的：

.mydivclass {overflow-x: hidden; overflow-y: auto;}

【讨论】：

【解决方案5】：

将此代码添加到您的 CSS。它将禁用水平滚动条。

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

【讨论】：

【解决方案6】：

无滚动（不指定 x 或 y）：

.your-class {
   overflow: hidden;
}

移除水平滚动：

.your-class {
   overflow-x: hidden;
}

移除垂直滚动：

.your-class {
   overflow-y: hidden;
}

【讨论】：

OP 需要在没有滚动条的情况下滚动

【解决方案7】：

要隐藏水平滚动条，我们可以选择需要的div的滚动条，设置为display: none;

需要注意的是，这仅适用于基于 WebKit 的浏览器（如 Chrome），因为 Mozilla 没有这样的选项。

要选择滚动条，请使用::-webkit-scrollbar

所以最终的代码会是这样的：

div::-webkit-scrollbar {
  display: none;
}

【讨论】：

【解决方案8】：

要删除水平滚动条，请使用以下代码。它 100% 有效。

html, body {
    overflow-x: hidden;
}

【讨论】：

【解决方案9】：

如果没有横向溢出，也可以直接使用

overflow: auto;

它只会在需要时显示滚动条。

见The CSS Overflow Property

【讨论】：

【解决方案10】：

overflow-x:hidden;

但是，您在网站上的内容可能不会显示。所以最好检查元素并检查 div 或部分的宽度，并删除它可能额外添加的任何右/左边距。更好的解决方案

【讨论】：

【解决方案11】：

用途：

overflow: auto;

这将显示垂直滚动条，并且只有在垂直溢出时才会显示，否则，它将被隐藏。

如果您同时有 x 和 y 溢出，则 x 和 y 滚动条都会显示。

要隐藏 x（水平）滚动条，即使存在，只需添加：

overflow-x: hidden;

body {
    font-family: sans-serif;
}

.nowrap {
    white-space: nowrap;
}

.container {
    height: 200px;
    width: 300px;
    padding 10px;
    border: 1px solid #444;

    overflow: auto;
    overflow-x: hidden;
}

<div class="container">
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li class="nowrap">Item 8 and some really long text to make it overflow horizontally.</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
  <li>Item 17</li>
</ul>
</div>

【讨论】：

【解决方案12】：

隐藏scrollbar，但保留该行为。

div::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

这是有限制的。

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

【讨论】：

【解决方案13】：

使用这段代码..

.card::-webkit-scrollbar {
  display: none;
}

【讨论】：

这确实删除了两个滚动条（y 和 x）。虽然仍然是一个很好的迹象

【解决方案14】：

删除水平滚动条，同时允许滚动，仅此而已。

&::-webkit-scrollbar:horizontal {
  height: 0;
  width: 0;
  display: none;
}

&::-webkit-scrollbar-thumb:horizontal {
  display: none;
}

【讨论】：

【解决方案15】：

隐藏滚动条

第 1 步：

转到任何浏览器，例如 Google Chrome
点击键盘 ctrl+Shift+i 检查使用打开的工具 Developer

第 2 步：

将鼠标聚焦在 div 上并更改样式 div 试试这个：

 overflow: hidden; /* Hide scrollbars */

现在去在项目中添加文件 .css 并包含文件

【讨论】：

【解决方案16】：

我在使用时遇到了问题

overflow: none;

但我知道 CSS 并不是真的喜欢它，而且它并不能 100% 达到我想要的效果。

但是，这是一个完美的解决方案，因为我的内容都不应大于预期，这解决了我遇到的问题。

overflow: auto;

【讨论】：