自动滚动div溢出内容

时间:2013-09-10 16:48:00

标签: jquery scroll overflow hidden

我有一个800px到150px的div,然后是其中的一些其他div。外面的一个有溢出隐藏,所以你不能看到超出外部div的东西。但我希望用户能够水平滚动浏览以查看更多内容。另外,我想运行一个jquery脚本,如果它们没有滚动它,它会自动滚动。
像这样:

<div id="mask" style="width: 800px; height: 150px; position: relative; overflow: hidden;">
<div id="inside-content"><img src="images/thing.jpg"></div>
<div id="inside-content"><img src="images/thing.jpg"></div>
<div id="inside-content"><img src="images/thing.jpg"></div>
</div>

对于如何做到这一点的任何想法都是受欢迎的,提前谢谢!

1 个答案:

答案 0 :(得分:1)

使用overflow-x和overflow-y提供不同的滚动/隐藏行为,而不是简写溢出CSS属性,并浮动内部内容。 (并且不要在文档中的任何位置使用多个ID,而是使用类。)

See JS-Fiddle

HTML:

<div id="mask">
    <div class="inner">
        <div class="inside-content">
            <img src="http://lorempixel.com/800/150/city" alt="" />
        </div>
        <div class="inside-content">
            <img src="http://lorempixel.com/800/150/sport" alt="" />
        </div>
        <div class="inside-content">
            <img src="http://lorempixel.com/800/150/people" alt="" />
        </div>
    </div>
</div>

CSS:

#mask {
    width: 800px;
    height: 150px;
    overflow-x: auto;
    overflow-y: hidden;
}

.inner {
    width: 2400px; /* 3 times mask */
}

.inside-content {
    float: left;
}