CSS div元素 - 如何只显示水平滚动条？

Question

我有一个div容器,并定义了它的样式如下:

div#tbl-container 
{
    width: 600px;   
    overflow: auto;    
    scrollbar-base-color:#ffeaff
}

一旦我填充了这个div所包含的表格,这会自动给我水平和垂直滚动条.我只想要自动出现水平滚动条.我将以编程方式修改表的高度.

我该怎么做呢？

Answer 1

除非您使内容足够大以满足要求,否则不应同时获得水平和垂直滚动条.

但是,由于存在错误,您通常会在IE中执行此操作 检查其他浏览器(Firefox等)以确定它是否实际上只是IE正在这样做.

IE6-7(以及其他浏览器)支持建议的CSS3扩展来独立设置滚动条,您可以使用它来抑制垂直滚动条:

overflow: auto;
overflow-y: hidden;

您可能还需要为IE8添加:

-ms-overflow-y: hidden;

因为微软威胁要在IE8标准模式下将所有CR前标准属性移动到他们自己的'-ms'框中.(如果他们总是以这种方式做到这一点会有意义,但现在对每个人来说都是一种不便.)

另一方面,IE8完全有可能修复bug.

Answer 2

我还必须添加white-space: nowrap;样式,否则元素将包含到我们正在删除滚动功能的区域.

Answer 3

此解决方案没有父div的高度/宽度规范,因此它将响应窗口大小调整,并且最有用的原因只是在需要时出现水平滚动条.

.container{
    padding:20px;
    border:dotted 1px;
    white-space:nowrap;
    overflow-x:auto;
}

.box{
    width:100px;
    height:180px;
    background-color: red;
    margin:10px;
    display:inline-block
}

看看DEMO

Answer 4

要显示两者:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll; padding-bottom:10px;">      </div>

隐藏X轴:

<div style="height:250px; width:550px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;">      </div>

隐藏Y轴:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;">      </div>

Answer 5

你也可以制作它overflow: auto并给出一个最大的固定高度和宽度,当文本或其中的任何内容溢出时它将只显示所需的滚动条

Answer 6

我使用CSS属性:1)" overflow-x: auto"; 2)" overflow-y: hidden"; 3)" white-space: nowrap";

不要忘记为容器和内部DIVS组件设置宽度.属性"white-space:nowrap"允许内部DIVS不会掉落在不同的行上.

考虑以下HTML:

<div class="container"> 
  <div class="inner-1"></div>
  <div class="inner-2"></div>
  <div class="inner-3"></div>
</div>

我使用以下CSS只有一个水平滚动:

.container {
  height: 80px;
  width: 600px;
  overflow-x: auto;
  overflow-y: hidden; 
  white-space: nowrap;
}
.inner-1,.inner-2,.inner-3 {
  height: 60px;
  max-width: 250px;
 display: inline-block; /* this should fix it */
}

小提琴:https://jsfiddle.net/qrjh93x8/(不使用上面的代码)