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

当我设定 overflow: scroll，我将获得水平和垂直滚动条。

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

overflow-x: hidden;

别忘了写 overflow-x: hidden;

代码应为：

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

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

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

的CSS

overflow-y: scroll;

在jsFiddle上看到它。

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

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

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

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

.your-class {
   overflow: hidden;
}

删除水平滚动：

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

删除垂直滚动：

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

要隐藏水平滚动条，我们只需选择所需div的滚动条并将其设置为 display: none;

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

为了选择滚动条，使用 ::-webkit-scrollbar

因此，最终代码将如下所示：

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

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

html, body {
    overflow-x: hidden;
}

如果您没有任何水平溢出的东西，也可以使用

overflow: auto;

并且仅在需要时显示滚动条。

请参阅CSS Overflow属性

用：

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>

隐藏scrollbar，但保留行为。

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

这有局限性。

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

使用此代码块。

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

我一直在使用的地方遇到问题

overflow: none;

但是我知道CSS并不是真的很喜欢它，而且对于我想要的方式它也不是100％有效。

但是，这是一个完美的解决方案，因为我的内容都不应该超出预期，并且已经解决了我遇到的问题。

overflow: auto;