判斷div滑動到底部的scroll實例代碼

來源：懂視網責編：小采時間：2020-11-27 22:25:33

判斷div滑動到底部的scroll實例代碼

判斷div滑動到底部的scroll實例代碼:實例如下所示： <!DOCTYPE html> <html> <head> <title>判斷div滑到底部的代碼</title> <script type=text/javascript src=jquery-3.1.0.min.js></script&

推薦度：

點擊下載本文 文檔為doc格式

導讀判斷div滑動到底部的scroll實例代碼:實例如下所示： <!DOCTYPE html> <html> <head> <title>判斷div滑到底部的代碼</title> <script type=text/javascript src=jquery-3.1.0.min.js></script&

實例如下所示：

<!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

判斷div滑動到底部的scroll實例代碼

推薦度：

點擊下載本文 文檔為doc格式

標簽：判斷滾動底部

熱門焦點

判斷div滑動到底部的scroll實例代碼

判斷div滑動到底部的scroll實例代碼

判斷div滑動到底部的scroll實例代碼

最新推薦

猜你喜歡

熱門推薦