2

我正在尝试水平滚动元素，并将其父级的溢出设置为隐藏。

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

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) 具有固定宽度。

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

4

1 回答 1

1

如果添加：

.scroll {
    white-space:nowrap;
}

并替换width = $scroll.width()为：

width = $scroll.get(0).scrollWidth

如果没有明确的宽度设置，它会正常工作。演示

于 2012-10-30T18:39:33.740 回答