Html 如何删除div中的水平滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4405954/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I remove the horizontal scrollbar in a div?
提问by Ravi
When I set overflow: scroll, I get horizontal and vertical scrollbars.
当我设置时overflow: scroll，我会得到水平和垂直滚动条。
Is there a way to remove the horizontal scrollbar in a div?
有没有办法删除div中的水平滚动条？
回答by basarat
overflow-x: hidden;
回答by Ajit Bhandari
Don't forget to write overflow-x: hidden;
不要忘记写 overflow-x: hidden;
The code should be:
代码应该是：
overflow-y: scroll;
overflow-x: hidden;
回答by Pasha
With overflow-y: scroll, the vertical scrollbar will always be there even if it is not needed. If you want y-scrollbar to be visible only when it is needed, I found this works:
使用overflow-y: scroll，即使不需要垂直滚动条，它也将始终存在。如果您希望 y-scrollbar 仅在需要时可见，我发现这有效：
.mydivclass {overflow-x: hidden; overflow-y: auto;}
回答by alex
CSS
CSS
overflow-y: scroll;
Notice if you remove the -yfrom the overflow-yproperty, the horizontal scroll bar is shown.
请注意，如果-y从overflow-y属性中删除，则会显示水平滚动条。
回答by vasanth
Add this code to your CSS. It will disable the horizontal scrollbar.
将此代码添加到您的 CSS。它将禁用水平滚动条。
html, body {
max-width: 100%;
overflow-x: hidden;
}
回答by Mise
No scroll (without specifying x or y):
无滚动（不指定 x 或 y）：
.your-class {
overflow: hidden;
}
Remove horizontal scroll:
删除水平滚动：
.your-class {
overflow-x: hidden;
}
Remove vertical scroll:
删除垂直滚动：
.your-class {
overflow-y: hidden;
}
回答by Harshit Bansal
To remove the horizontal scroll bar, use the following code. It 100% works.
要删除水平滚动条，请使用以下代码。它 100% 有效。
html, body {
overflow-x: hidden;
}
回答by Shubham Jain
To hide the horizontal scrollbar, we can just select the scrollbar of the required div and set it to display: none;
要隐藏水平滚动条，我们只需选择所需 div 的滚动条并将其设置为 display: none;
One thing to note is that this will only work for WebKit-based browsers (like Chrome) as there is no such option available for Mozilla.
需要注意的一件事是，这仅适用于基于 WebKit 的浏览器（如 Chrome），因为 Mozilla 没有这样的选项。
In order to select the scrollbar, use ::-webkit-scrollbar
为了选择滚动条，请使用 ::-webkit-scrollbar
So the final code will be like this:
所以最终的代码会是这样的：
div::-webkit-scrollbar {
display: none;
}
回答by rspilhaus
If you don't have anything overflowing horizontally, you can also just use
如果你没有任何水平溢出的东西，你也可以使用
overflow: auto;
and it will only show scrollbars when needed.
它只会在需要时显示滚动条。
请参阅CSS 溢出属性
回答by aero
Use:
用：
overflow: auto;
This will show the vertical scrollbar and only if there is a vertical overflow, otherwise, it will be hidden.
这将显示垂直滚动条，并且只有在垂直溢出时才会显示，否则，它将被隐藏。
If you have both an x and y overflow, then both x and y scrollbars will be shown.
如果您同时有 x 和 y 溢出，则 x 和 y 滚动条都会显示。
To hide the x (horizontal) scrollbar, even if present simply add:
要隐藏 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>