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

Question

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

有没有办法删除div中的水平滚动条？

Answer 1

overflow-x: hidden;

Answer 2

要删除水平滚动条，请使用此代码。它100％有效

html, body {overflow-x: hidden;}

Answer 3

我一直在遇到我正在使用的问题

overflow:none;

但是知道CSS并不是真的喜欢它并且它不能100％地完成我想要它的工作。

然而，这是一个完美的解决方案，因为我的内容都没有超出预期，这解决了我的问题。

overflow:auto;

Answer 4

别忘了写overflow-x:hidden;

代码应该是

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

Answer 5

使用overflow-y:scroll，即使不需要，垂直滚动条也将始终存在。如果你想让y滚动条仅在需要时可见，我发现它有效：

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

Answer 6

CSS

overflow-y: scroll;

See it on jsFiddle。

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

Answer 7

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

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

Answer 8

没有滚动：//没有指定x或y

.your-class {
   overflow: hidden; 
}

删除水平滚动：

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

删除垂直滚动：

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

Answer 9

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

overflow:auto;

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

http://css-tricks.com/the-css-overflow-property/

Answer 10

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

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

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

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

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

Answer 11

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>