Question

I’m trying to scroll an element horizontally, with its parent’s overflow set to hidden.

Here’s what I’ve got so far:

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();
});​

Working demo: http://jsfiddle.net/hTnNk/

---

The above works flawlessly, but has the inner element (.scroll) with a fixed width.

Is there any way to accomplish this without setting the inner element’s width explicitly?

Answer 1

If you add:

.scroll {
    white-space:nowrap;
}

and replace width = $scroll.width() with:

width = $scroll.get(0).scrollWidth

It’ll work fine without an explicit width set. Demo