上拉加載的思路
1 上拉加載是要把屏幕拉到最底部的時候觸發ajax事件請求數據
2.所有要獲取屏幕的高度 文檔的高度 和滾動的高度 下面的代碼是已經做好了兼容的可以直接拿來用
Javascript:alert(document.body.clientWidth); //網頁可見區域寬(body)alert(document.body.clientHeight); //網頁可見區域高(body)alert(document.body.offsetWidth); //網頁可見區域寬(body),包括border、margin等alert(document.body.offsetHeight); //網頁可見區域寬(body),包括border、margin等alert(document.body.scrollWidth); //網頁正文全文寬,包括有滾動條時的未見區域alert(document.body.scrollHeight); //網頁正文全文高,包括有滾動條時的未見區域alert(document.body.scrollTop); //網頁被卷去的Top(滾動條)alert(document.body.scrollLeft); //網頁被卷去的Left(滾動條)alert(window.screenTop); //瀏覽器距離Topalert(window.screenLeft); //瀏覽器距離Leftalert(window.screen.height); //屏幕分辨率的高alert(window.screen.width); //屏幕分辨率的寬alert(window.screen.availHeight); //屏幕可用工作區的高alert(window.screen.availWidth); //屏幕可用工作區的寬 Jqueryalert($(window).height()); //瀏覽器當前窗口可視區域高度alert($(document).height()); //瀏覽器當前窗口文檔的高度alert($(document.body).height()); //瀏覽器當前窗口文檔body的高度alert($(document.body).outerHeight(true)); //瀏覽器當前窗口文檔body的總高度 包括border padding marginalert($(window).width()); //瀏覽器當前窗口可視區域寬度alert($(document).width()); //瀏覽器當前窗口文檔對象寬度alert($(document.body).width()); //瀏覽器當前窗口文檔body的寬度alert($(document.body).outerWidth(true)); //瀏覽器當前窗口文檔body的總寬度 包括border padding margin
//獲取滾動條當前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; } else if (document.body) { scrollTop = document.body.scrollTop; } return scrollTop; } //獲取當前可視范圍的高度 function getClientHeight() { var clientHeight = 0; if (document.body.clientHeight && document.documentElement.clientHeight) { clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); } else { clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); } return clientHeight; } //獲取文檔完整的高度 function getScrollHeight() { return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); }var upDown = function (opt) { opt = opt || {}; var up = opt.up || function () { }; window.onscroll = function () {if (getScrollTop() + getClientHeight() == getScrollHeight()) { //距離頂部+當前高度 >=文檔總高度 即代表滑動到底部 if(is_scroll === true){ //當這個為true的時候調用up方法 ....is_scroll沒看懂往下看 up(); }} } };
新聞熱點
疑難解答
圖片精選