頁面到達底部,加載更多
阿新 • • 發佈:2019-03-14
加載更多 ott ack touch inb cal pass art win
loadMore = (element, callback) => { let windowHeight = window.screen.height; let height; let setTop; let paddingBottom; let marginBottom; let requestFram; let oldScrollTop; document.body.addEventListener(‘scroll‘,() => { loadMore(); }, false) //運動開始時獲取元素 高度 和 offseTop, pading, margin element.addEventListener(‘touchstart‘,() => { height = element.offsetHeight; setTop = element.offsetTop; paddingBottom = getStyle(element,‘paddingBottom‘); marginBottom = getStyle(element,‘marginBottom‘); },{passive: true}) //運動過程中保持監聽 scrollTop 的值判斷是否到達底部 element.addEventListener(‘touchmove‘,() => { loadMore(); },{passive: true}) //運動結束時判斷是否有慣性運動,慣性運動結束判斷是非到達底部 element.addEventListener(‘touchend‘,() => { oldScrollTop = document.body.scrollTop; moveEnd(); },{passive: true}) const moveEnd = () => { requestFram = requestAnimationFrame(() => { if (document.body.scrollTop != oldScrollTop) { oldScrollTop = document.body.scrollTop; loadMore(); moveEnd(); }else{ cancelAnimationFrame(requestFram); //為了防止鼠標擡起時已經渲染好數據從而導致重獲取數據,應該重新獲取dom高度 height = element.offsetHeight; loadMore(); } }) } const loadMore = () => { if (document.body.scrollTop + windowHeight >= height + setTop + paddingBottom + marginBottom) { callback(); } } }
頁面到達底部,加載更多