重复div无限的水平滚动动画？

Question

我有一个包含其他元素的#scrollBar div。目的是制作一个在加载页面时自动运行的视差滚动条。我希望它向左滚动直到它到达它的结束，然后从它开始循环并以无限动画运行。目的不是要注意它何时结束。你能帮我解决一下这个问题吗？

html是：

<div id="scrollBar" class="container-outer">
    <div class="container-inner">
            More elements...
    </div>
</div>

css：

.container-outer { 
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap; 
    width: 100%; 
    height: 200px;
}

.container-inner { 
    width: 2000px; 
    position: relative; 
}

Js：

function loop() {

    $scrollBar.animate ({
            'scrollLeft': '+=200',
        }, 8000, 'linear', function() {
            loop();
        });

        console.log($scrollBar.width());
        console.log($scrollBar.scrollLeft());

        if ($scrollBar.scrollLeft == $scrollBar.width()) {
            $scrollBar.scrollLeft = 0;
        }
    }

loop();