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

Question

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

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

Answer 1

overflow-x: hidden;

\n

Answer 2

不要忘记写overflow-x: hidden;

代码应该是：

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

Answer 3

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

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

Answer 4

CSS

overflow-y: scroll;

在 jsFiddle 上查看。

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

Answer 5

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

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

Answer 6

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

.your-class {
   overflow: hidden;
}

删除水平滚动：

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

删除垂直滚动：

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

Answer 7

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

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

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

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

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

Answer 8

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

html, body {
    overflow-x: hidden;
}

Answer 9

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

overflow: auto;

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

请参阅CSS 溢出属性

Answer 10

overflow-x:hidden;

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

Answer 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>

Answer 12

隐藏scrollbar ，但保持行为。

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

---

这有限制。

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

Answer 13

使用这段代码..

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

Answer 14

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

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

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

Answer 15

隐藏滚动条

第1步：

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

第2步：

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

 overflow: hidden; /* Hide scrollbars */

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

Answer 16

我在使用时遇到问题

overflow: none;

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

然而，这是一个完美的解决方案，因为我的任何内容都不应该比预期的大，这解决了我遇到的问题。

overflow: auto;