亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

無限滾動的小DEMO, 邏輯哪里出錯了?

無限滾動的小DEMO, 邏輯哪里出錯了?

繁花如伊 2018-08-07 10:10:20
我寫個無限滾動的小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 150200232232...232重復很多次. 然后又是49.6
查看完整描述

1 回答

?
守候你守候我

TA貢獻1802條經驗 獲得超10個贊

已經找到答案啦. 
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. 因為已經到達了臨界點.


查看完整回答
反對 回復 2018-09-23
  • 1 回答
  • 0 關注
  • 548 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號