Autoscroll div溢出内容

Question

我有一个div800px乘以150 by，然后里面还有一些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>

任何关于如何做到这一点的想法都是受欢迎的，谢谢！

Answer 1

使用overflow和overflow提供不同的滚动/隐藏行为，而不是速记溢出CSS-属性，并浮动您的内部内容。(不要在文档中的任何地方使用多个ID，而是使用类)。

见

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