如何在 div 中移除水平滚动条？

Question

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

有没有办法在

中去掉水平滚动条？

- Ravi

Answer 1

overflow-x: hidden;

- basarat

---

这不是一个好的解决方案。因为在这种情况下，你只是在容器中隐藏了水平滚动条。但如果该容器太宽，你的内容将无法适应容器。 - Alex Filatov

Answer 2

不要忘记写 overflow-x: hidden;

代码应该是：

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

- Ajit Bhandari

Answer 3

CSS

overflow-y: scroll;

点击此处在 jsFiddle 上查看。

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

- alex

Answer 4

overflow-y: scroll 属性会在不需要时依然展示垂直滚动条。如果你希望仅在有需要时展示 y-滚动条，可以使用以下方法：

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

- Pasha

Answer 5

为了隐藏水平滚动条，我们可以选择所需 div 的滚动条，并将其设置为 display: none;。需要注意的一点是，这仅适用于基于 WebKit 的浏览器（如 Chrome），因为 Mozilla 没有可用的选项。为了选择滚动条，请使用 ::-webkit-scrollbar。因此，最终代码将像这样：

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

- Shubham Jain

Answer 6

请将以下代码添加到你的CSS文件中。它将禁用水平滚动条。

将以下代码添加到您的CSS文件中。它将禁用水平滚动条。

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

- vasanth

Answer 7

没有滚动条（未指定x或y）：

.your-class {
   overflow: hidden;
}

去掉水平滚动条：

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

去除垂直滚动条：

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

- Mise

---

OP需要在没有滚动条的情况下进行滚动。 - T04435

Answer 8

移除水平滚动条，同时允许滚动但不做其他处理。

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

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

- Gabriel Petersson

---

感谢您显然是互联网上唯一准确回答这个问题的人！干得好。 - nionios

Answer 9

为了去掉水平滚动条，请使用以下代码。它百分之百有效。

html, body {
    overflow-x: hidden;
}

- Harshit Bansal

Answer 10

如果你的内容没有水平溢出，你也可以直接使用。

overflow: auto;

当需要时它将只显示滚动条。

详见CSS Overflow属性

- rspilhaus