Question

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

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

Answer 1

overflow-x: hidden;

Answer 2

不要忘记写overflow-x:hidden;

代码应该是

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

Answer 3

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

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

Answer 4

CSS

overflow-y: scroll;

See it on jsFiddle

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

Answer 5

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

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

Answer 6

无滚动：//未指定x或y

.your-class {
   overflow: hidden; 
}

删除水平滚动：

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

删除垂直滚动：

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

Answer 7

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

overflow:auto;

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

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

Answer 8

隐藏scrollbar，但保持行为。

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

对此有限制。

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

Answer 9

overflow-x:hidden;

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

Answer 10

overflow: auto;

这将显示垂直滚动条，并且仅在存在垂直溢出时，否则，它将被隐藏。

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

隐藏x（水平）滚动条，即使只是添加：

overflow-x: hidden;

＆＃13;

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;
 }

＆＃13;

<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>

＆＃13;

Answer 11

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

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

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

因此最终的代码将如下所示：

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

Answer 12

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

html, body {overflow-x: hidden;}

Answer 13

使用此代码块。

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

Answer 14

删除水平滚动条，同时允许滚动和其他更多内容。

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

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

Answer 15

隐藏滚动条

第 1 步：

转到任何浏览器，例如 Google Chrome
点击键盘 ctrl+Shift+i 检查使用打开的工具 Developer

第 2 步：

将鼠标聚焦在 div 上并更改样式 div 使用试试这个：

 overflow: hidden; /* Hide scrollbars */

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

Answer 16

我一直有使用

的问题

overflow:none;

但是知道CSS并不是真的很喜欢它并且它完全按照我想要的方式工作。

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

overflow:auto;

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

16 个答案:

CSS

隐藏滚动条

第 1 步：

第 2 步：