一、jQuery檢測瀏覽器window滾動條到達底部
jQuery獲取位置和尺寸相關函數：
$(document).height() 獲取整個頁面的高度
$(window).height() 獲取當前也就是瀏覽器所能看到的頁面的那部分的高度。這個大小在你縮放瀏覽器窗口大小時會改變，與document是不一樣的
scrollTop() 獲取匹配元素相對滾動條頂部的偏移。
scrollLeft() 獲取匹配元素相對滾動條左側的偏移。
scroll([[data],fn]) 當滾動條發生變化時觸犯scroll事件
jQuery檢測滾動條到達底部代碼：
$(document).ready(function() { $(window).scroll(function() { if ($(document).scrollTop()<=0){ alert("滾動條已經到達頂部為0"); } if ($(document).scrollTop() >= $(document).height() - $(window).height()) { alert("滾動條已經到達底部為" + $(document).scrollTop()); } });});二、jQuery檢測div中滾動條到達底部
上半篇介紹了jQuery檢測瀏覽器window滾動條到達底部，其實還并不理解scrollTop和scrollHeight概念，通常滾動條都是放在div中的。
如下檢測id為scroll_div滾動條到達底部事件:
<div id="scroll_div" style="overflow-y:auto; overflow-x:hidden;margin:100px;height:500px;border:1px solid red"> <div style="height:10000px"> 來自于m.survivalescaperooms.com武林網<br> 來自于m.survivalescaperooms.com武林網<br> 來自于m.survivalescaperooms.com武林網<br> </div> </div>
首先需要理解幾個概念:
scrollHeight:表示滾動條需要滾動的高度，即內部div，10000px
scrollTop: 表示滾動條滾動的高度，可能大于外部div 500px
也就是說scrollDiv的高度+scrollTop滾動的最大高度=scrollHeight
于是檢測div中div滾動條高度就簡單了：
$(document).ready(function() { $("#scroll_div").scroll(function(){ var divHeight = $(this).height(); var nScrollHeight = $(this)[0].scrollHeight; var nScrollTop = $(this)[0].scrollTop; $("#input1").val(nScrollHeight); $("#input2").val(nScrollTop); $("#input3").val(divHeight); if(nScrollTop + divHeight >= nScrollHeight) { alert("到達底部了"); } });});如果是異步加載數據，數據沒加載完，又觸犯了同一頁的數據加載請求，我通常是加一個flag
$(document).ready(function() { var flag = false; $("#scroll_div").scroll(function(){ if(flag){ //數據加載中 return false; } var divHeight = $(this).height(); var nScrollHeight = $(this)[0].scrollHeight; var nScrollTop = $(this)[0].scrollTop; $("#input1").val(nScrollHeight); $("#input2").val(nScrollTop); $("#input3").val(divHeight); if(nScrollTop + divHeight >= nScrollHeight) { //請求數據 flag = true; alert("到達底部了"); } });});新聞熱點
疑難解答
