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

overflow-x: hidden;

---

不要忘记写 overflow-x: hidden;

代码应该是：

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

---

CSS

overflow-y: scroll;

See it on jsFiddle。

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

---

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

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

---

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

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

---

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

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

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

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

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

---

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

.your-class {
   overflow: hidden;
}

删除水平滚动：

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

删除垂直滚动：

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

---

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

html, body {
    overflow-x: hidden;
}

---

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

overflow: auto;

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

请参阅The CSS Overflow Property

---

overflow-x:hidden;

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

---

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

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

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

---

利用：

overflow: auto;

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

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

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

overflow-x: hidden;

正文 { 字体系列：无衬线； } .nowrap { 空白：nowrap; } .container { 高度：200px;宽度：300px；填充 10 像素；边框：1px 实心 #444;溢出：自动；溢出-x：隐藏； }

---

隐藏 scrollbar，但保留该行为。

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

这有一些限制。

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

---

使用这块代码..

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

---

隐藏滚动条

步骤1：

第2步：

 overflow: hidden; /* Hide scrollbars */

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

---

我在使用时遇到了问题

overflow: none;

但我知道 CSS 并不真正喜欢它，它并没有 100% 地按照我想要的方式工作。

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

overflow: auto;

---