无限滚动的小DEMO, 逻辑哪里出错了?

Question

我写个无限滚动的小DEMO, 给scrollLeft赋值时, 到了某个值就会重复给了赋值. 这个是什么原因?.
代码:

<script type="text/javascript">
    var con = document.getElementById("container"),
        uls = document.getElementsByTagName("ul"),
        t = 0, step = 50, temp = 5;
        setInterval(function(){
            t = t + step;
            if (t >= uls[0].offsetWidth) {//uls[0].offsetWidth的值为682
                t = step;
            }
            con.scrollLeft = t;
            console.log(con.scrollLeft);
        },1000)
    </script>

输出:
49.6
100
150
200
232
232
...
232重复很多次.
然后又是
49.6

Answer 1

已经找到答案啦.
container的scrollLeft不可无限增大. 当450的包含框向左滚动了232px后, 682px的内容已经全部显示完成. 此时再给scrollLeft赋值并无意义.
举个例子:

<div id="container"><!-- 450px -->
        <div id="content"><!-- 682px -->
            <ul>
                <li><img src="t1.jpg"></li>
                <li><img src="t1.jpg"></li>
                <li><img src="t1.jpg"></li>
                <li><img src="t1.jpg"></li>
                <li><img src="t1.jpg"></li>
            </ul>
            <ul>
                <li><img src="t1.jpg"></li>
                <li><img src="t1.jpg"></li>
                <li><img src="t1.jpg"></li>
                <li><img src="t1.jpg"></li>
                <li><img src="t1.jpg"></li>
            </ul>
        </div>
    </div>
    
    container.scrollLeft = 1000;//得到的还是232. 因为已经到达了临界点.