我写个无限滚动的小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
已经找到答案啦.
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. 因为已经到达了临界点.