javascript - 水平滚动元素，宽度未指定

Question

我试图水平滚动一个元素，其父元素的溢出设置为隐藏。

这是我到目前为止所得到的:

HTML:

<div class="parent">
    <div class="scroll">This element's text scrolls horizontally.</div>
</div>​

CSS:

.parent {
    overflow: hidden;
    height: 36px;
}
.scroll {
    width: 1500px;
}

JS:

$(function(){
    var $parent = $('.parent'),
        $scroll = $('.scroll'),
        width = $scroll.width(),
        scroll = function (){
            $scroll.animate({
                'margin-left': -width
            }, 12000, function () {
                $scroll.css('margin-left', $parent.width());
                scroll();
            });
        };

    scroll();
});​

工作演示:http://jsfiddle.net/hTnNk/

---

上面的代码完美无缺，但内部元素 (.scroll) 的宽度是固定的。

有没有办法在不显式设置内部元素宽度的情况下实现这一点？

Answer 1

如果你添加:

.scroll {
    white-space:nowrap;
}

并将 width = $scroll.width() 替换为:

width = $scroll.get(0).scrollWidth

它可以在没有显式宽度设置的情况下正常工作。 Demo