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

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

有办法移除 div 中的水平滚动条吗？

371705 次浏览
小开 
overflow-x: hidden;

小开

CSS

overflow-y: scroll;

在 jsFiddle 上可以看到。

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

小开

别忘了写 overflow-x: hidden;

密码应为:

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

对于 overflow-y: scroll，垂直滚动条将始终存在，即使它不是必需的。如果你想让 y-scrollbar 只在需要的时候才可见，我发现这个方法很有效:

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

没有滚动(没有指定 x 或 y) :

.your-class {
overflow: hidden;
}

删除水平滚动条:

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

删除垂直滚动条:

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

如果水平方向没有溢出，也可以直接使用

overflow: auto;

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

参见 一个 href = “ http://CSS-trick s.com/The-CSS-Overflow-Property/”rel = “ nofollow noReferrer”> The CSS Overflow Property

小开

我吸毒的地方出了点问题

overflow: none;

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

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

overflow: auto;
小开

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

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

用途:

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>

小开

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

需要注意的是，这只适用于基于 WebKit 的浏览器(比如 Chrome) ，因为 Mozilla 没有这样的选项。

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

最终的代码是这样的:

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

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

html, body {
overflow-x: hidden;
}
小开

隐藏 scrollbar，但保持行为。

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

这是有局限性的。

小开

使用这段代码。

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

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

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


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

隐藏滚动条

第一步:

进入任何浏览器，例如谷歌浏览器
点击键盘 ctrl + Shift + i 检查使用开放工具开发人员

第二步:

鼠标对准 div 并更改样式 div 试试这个: 
 overflow: hidden; /* Hide scrollbars */

现在在项目中添加 file.css 并包含 file

小开 
overflow-x:hidden;

然而，有可能你在网站上的内容可能不会显示。因此，最好检查元素和检查您的 div 或部分的宽度，并删除任何右/左边距可能放入额外的。更好的解决办法


提交答案