当我设置时overflow: scroll，我得到水平和垂直滚动条。
有没有办法删除div中的水平滚动条？
问问题
327849 次
16 回答
246
overflow-x: hidden;
于 2010-12-10T05:30:44.273 回答
56
别忘了写overflow-x: hidden;
代码应该是：
overflow-y: scroll;
overflow-x: hidden;
于 2012-11-04T13:04:55.177 回答
23
于 2010-12-10T05:32:34.090 回答
22
使用overflow-y: scroll，即使不需要，垂直滚动条也将始终存在。如果您希望 y-scrollbar 仅在需要时可见，我发现这可行：
.mydivclass {overflow-x: hidden; overflow-y: auto;}
于 2013-12-31T07:50:29.547 回答
17
将此代码添加到您的 CSS。它将禁用水平滚动条。
html, body {
max-width: 100%;
overflow-x: hidden;
}
于 2015-10-26T07:28:26.070 回答
16
无滚动（不指定 x 或 y）：
.your-class {
overflow: hidden;
}
删除水平滚动：
.your-class {
overflow-x: hidden;
}
删除垂直滚动：
.your-class {
overflow-y: hidden;
}
于 2014-10-09T19:35:27.993 回答
16
要隐藏水平滚动条，我们只需选择所需div的滚动条并将其设置为display: none;
需要注意的一点是，这仅适用于基于 WebKit 的浏览器（如 Chrome），因为 Mozilla 没有这样的选项。
为了选择滚动条，使用::-webkit-scrollbar
所以最终的代码会是这样的：
div::-webkit-scrollbar {
display: none;
}
于 2018-08-21T18:35:03.683 回答
7
要删除水平滚动条，请使用以下代码。它 100% 有效。
html, body {
overflow-x: hidden;
}
于 2019-01-20T14:43:50.540 回答
6
于 2014-11-18T19:36:16.273 回答
4
overflow-x:hidden;
但是，您在网站上的内容可能不会显示。所以最好检查元素并检查 div 或部分的宽度，并删除它可能额外添加的任何右/左边距。更好的解决方案
于 2021-03-30T11:45:00.907 回答
2
利用：
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>于 2018-02-22T21:55:51.723 回答
2
隐藏scrollbar，但保留行为。
div::-webkit-scrollbar {
width: 0px;
background: transparent;
}
这有一些限制。
于 2019-12-18T02:56:03.890 回答
1
使用这块代码..
.card::-webkit-scrollbar {
display: none;
}
于 2020-02-08T14:23:11.143 回答
1
删除水平滚动条，同时允许滚动，仅此而已。
&::-webkit-scrollbar:horizontal {
height: 0;
width: 0;
display: none;
}
&::-webkit-scrollbar-thumb:horizontal {
display: none;
}
于 2020-12-18T16:30:33.047 回答
0
隐藏滚动条
步骤1：
转到任何浏览器，例如 Google Chrome点击键盘 ctrl+Shift+i 检查使用打开的工具 Developer
第2步：
将鼠标放在 div 上并更改样式 div 使用试试这个： overflow: hidden; /* Hide scrollbars */
现在去在项目中添加文件 .css 并包含文件
于 2021-02-06T18:42:13.117 回答
-2
我在使用时遇到了问题
overflow: none;
但我知道 CSS 并不真正喜欢它，它并没有 100% 地按照我想要的方式工作。
但是，这是一个完美的解决方案，因为我的内容都不应该比预期的大，这已经解决了我遇到的问题。
overflow: auto;
于 2015-08-13T15:13:13.970 回答