Question

如何在div中仅显示水平滚动条。我有条形图像，我想只为它们显示水平滚动条。我不希望显示垂直滚动条。请帮忙......

这是我的HTML

<div id="containersimg">
    <div id="wrapper">
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
    </div>
</div>

这是我的CSS

#wrapper {
    width: auto;
    height: 130px;
}

#containersimg {
   background-color: #bbb;
   width: 300px;
   height: 130px;
   overflow-x: scroll;
}

img {
   float: left;
    clear: none;
   margin: 5px;
}

我创造了一个小提琴，以展示我想要实现的目标

Fiddle Link

编辑1： 我能想到的唯一方法是将宽度添加到wrapper div，我不能，因为图像的数量和宽度是动态的

Answer 1

尝试使用overflow-x: scroll; overflow-y: hidden;

这个CSS应该在你的div上使用。

它只显示x轴滚动条并隐藏y轴滚动条。：）

如果您希望图像在一行中，请将display: inline; white-space: nowrap;添加到div。请参阅this。

或使用列表。 :)喜欢this。

Answer 2

好的，这是我的指示。您的代码保持不变。我只将overflow-y：hidden添加到容器img style

我所做的是添加了大约6行Javascript。不是Jquery，简单的旧Javscript和一些聪明的数学，这应该工作

我添加了一个工作小提琴..享受 http://jsfiddle.net/vUEYG/167/

var container = document.getElementById('wrapper');
var TW=0,Width=0;      // TW=Total width of the images
for(var i=0;i<container.children.length;i++)
    TW=TW+container.children[i].width;
Width=TW/container.children.length+10;  // The 10= Margin i.e 5 *2 
var width='width:'+container.children.length*Width+'px';
document.getElementById('wrapper').setAttribute("style",width);

Answer 3

您需要在滚动容器内部包装div以确保它们不受宽度约束，然后在容器上设置overflow-x：scroll。

快速演示。

FIDDLE

<强> CSS：

#wrapper {
    width: 500px;
    height: 110px;
}

#containersimg {
   background-color: #bbb;
   width: 300px;
   height: 135px;
   overflow-x: scroll;
}

.square {
   background-color: #00b;
   float: left;
   height: 90px;
   width: 90px;
   margin: 5px;
}

Answer 4

试试这段代码。 #wrapper的宽度应该是图像宽度乘以图像数量

#wrapper {
    width: 500px;
    height:400px

}
#containersimg {
    background-color: #bbb;
    width: 340px;
    height: 130px;
    overflow-x: scroll; 
    overflow-y: hidden;
}
img 
{
    margin: 5px;
    display: inline-block;
}

演示：http://jsfiddle.net/vUEYG/162/

动态图像尺寸仅限水平滚动条

4 个答案: