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

时间:2010-12-10 05:28:07

标签: html css overflow horizontal-scrolling

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

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

16 个答案:

答案 0 :(得分:163)

overflow-x: hidden;

答案 1 :(得分:30)

不要忘记写overflow-x:hidden;

代码应该是

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

答案 2 :(得分:17)

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

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

答案 3 :(得分:15)

CSS

overflow-y: scroll;

See it on jsFiddle

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

答案 4 :(得分:11)

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

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

答案 5 :(得分:6)

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

.your-class {
   overflow: hidden; 
}

删除水平滚动:

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

删除垂直滚动:

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

答案 6 :(得分:4)

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

overflow:auto;

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

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

答案 7 :(得分:2)

隐藏scrollbar,但保持行为。

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

对此有限制。

答案 8 :(得分:2)

overflow-x:hidden;

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

答案 9 :(得分:1)

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>
&#13;
&#13;
&#13;

答案 10 :(得分:1)

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

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

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

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

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

答案 11 :(得分:1)

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

html, body {overflow-x: hidden;}

答案 12 :(得分:1)

使用此代码块。

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

答案 13 :(得分:0)

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

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

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

答案 14 :(得分:0)

隐藏滚动条

第 1 步:

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

第 2 步:

将鼠标聚焦在 div 上并更改样式 div 使用试试这个:
 overflow: hidden; /* Hide scrollbars */

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

答案 15 :(得分:-3)

我一直有使用

的问题
overflow:none;

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

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

overflow:auto;