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

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

1 个答案: