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