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

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

jquery滾動事件動態加載數據怎么避免頁面的跳動現象?

jquery滾動事件動態加載數據怎么避免頁面的跳動現象?

哈士奇WWW 2018-12-12 14:15:31
最近做一個H5聊天頁面,利用jquery的scroll()方法監聽了滾動事件,然后用scrollTop()獲取當前頁面距離能滾動的最頂部的高度,當scrollTop()小于一定距離就觸發加載數據的請求。實際情景大概是這樣的,比如每一頁默認顯示10條數據,用戶第一次進頁面默認加載十條,然后用戶滾動頁面,當滾動到頂部的時候,請求ajax加載下一頁的十條數據,然后把每條數據push到當前頁面數據的數組中,但是這時頁面會默認停留在加載完數據后的最頂部,而想達到的理想效果是加載數據后,頁面還停留在第一頁的最后一條。我采用的處理辦法是去計算新加載的數據的總高度,然后讓頁面滾動這個高度到加載前的位置,可是實際效果會出現很明顯的跳動現象,而且還有一個嚴重的問題就是在手機上用戶滑動屏幕較快的話,會導致在每一頁的頂部多次觸發加載數據的方法,這樣就會一次性加載幾頁的數據。。想問下一般這種問題都是怎么處理的呢?(最好的效果我覺得應該就是加載數據后頁面不動,滾動條一直在當前數據的位置)其實如果能保證每次加載數據后重新滾動到加載前的位置,這樣就不會觸發重復請求的bug,但是在一些蘋果手機上這個滾動事件會失效,導致滾動條一直停留在頁面頂部而重復觸發請求。。太蛋疼了。。
查看完整描述

1 回答

?
慕神8447489

TA貢獻1780條經驗 獲得超1個贊

獲取數據前,記錄當前滾動的距離a,加載并渲染完后,讓窗口滾動到a的距離(相當于位置不變,但總的文檔高度增加,滾動條中的滑塊會變短。)實際開發中是這么用的,沒發現什么問題。


查看完整回答
反對 回復 2019-01-28
  • 1 回答
  • 0 關注
  • 696 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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