天天看點

JS判斷滾動條是否停止滾動

       背景:昨天一個同僚有種需求,有一個展示資料區域的div,帶滾動條,當滾動條滾動時,需要向背景發請求,計算資料,再拿到前台展示。

       分析:由于資料量級别較大,是以當滾動條滾動時,如果時時向背景發請求,對伺服器和浏覽器都造成巨大的壓力。想到的解決方案是,當滾動條停止時,再去發請求計算資料。那麼問題來了,如何判斷滾動條是否停止了呢?

       解決:搜尋了一下,js本身是無法判斷滾動條是在滾動狀态還是停止狀态,隻有通過其它方式了。後來想到的思路是當滾動條滾動的時候,發起一個定期執行的方法,并記錄一次目前滾動條到頂部的距離,這個方法中判斷此時滾動條到頂部的距離是否和上次記錄的相等,如果相等,那麼說明停止滾動了,不相等,還在滾動。

       代碼:    

       可以設定定時執行的時間,時間越短,響應的越及時,浏覽器壓力越大;時間越長,響應的越慢,浏覽器壓力越小。

       你還有更好的方式嗎?求教