實例如下所示：
<!DOCTYPE html>
<html>
<head>
<title>判斷div滑到底部的代碼</title>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<style type="text/css">
#scrollTest{
width:100px;
height:100px;
overflow-y: auto;//當div中y方向的內容溢出時，y軸分別顯示滾動條
border:1px solid red;
}
</style>
</head>
<body>
<div id="scrollTest">
<table>
<tr>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
</tr>
</table>
</div>
</body>
</html>
<!--//事先得引入jQuery文件-->
<script type="text/javascript">
$("#scrollTest").scroll(function(){
var h = $(this).height();//div可視區域的高度
var sh = $(this)[0].scrollHeight;//滾動的高度，$(this)指代jQuery對象，而$(this)[0]指代的是dom節點
var st =$(this)[0].scrollTop;//滾動條的高度，即滾動條的當前位置到div頂部的距離
if(h+st>=sh){
//上面的代碼是判斷滾動條滑到底部的代碼
//alert("滑到底部了");
$("#scrollTest").append(111+"<br>");//滾動條滑到底部時，只要繼續滾動滾動條，就會觸發這條代碼.一直滑動滾動條，就一直執行這條代碼。
}
})
</script>以上這篇判斷div滑動到底部的scroll實例代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
