判斷div滑動到底部的scroll實例代碼
更新時間：2017年11月15日 09:02:11 作者：qq_27511945
下面小編就就為大家分享一篇判斷div滑動到底部的scroll實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
實例如下所示：
<!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方向的內(nèi)容溢出時，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可視區(qū)域的高度
var sh = $(this)[0].scrollHeight;//滾動的高度，$(this)指代jQuery對象，而$(this)[0]指代的是dom節(jié)點
var st =$(this)[0].scrollTop;//滾動條的高度，即滾動條的當前位置到div頂部的距離
if(h+st>=sh){
//上面的代碼是判斷滾動條滑到底部的代碼
//alert("滑到底部了");
$("#scrollTest").append(111+"<br>");//滾動條滑到底部時，只要繼續(xù)滾動滾動條，就會觸發(fā)這條代碼.一直滑動滾動條，就一直執(zhí)行這條代碼。
}
})
</script>
以上這篇判斷div滑動到底部的scroll實例代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
下面小編就為大家?guī)硪黄狫avaScript 總結幾個提高性能知識點(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了擴展JS Date對象時間格式化功能，有需要的朋友可以參考一下2013-12-12
![[js高手之路]單例模式實現(xiàn)模態(tài)框的示例](http://img.jbzj.com/images/xgimg/bcimg3.png)
[js高手之路]單例模式實現(xiàn)模態(tài)框的示例
下面小編就為大家?guī)硪黄猍js高手之路]單例模式實現(xiàn)模態(tài)框的示例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09 
一文了解JavaScript中call/apply/bind的使用
這篇文章主要介紹了一文了解JavaScript中call/apply/bind的使用，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下
2022-07-07 
前段時間項目需要用到js樹，找了好多都不符合項目需求，后來發(fā)現(xiàn)了梅花雪樹和js框架，類似C#名稱空間的用法讓我眼前一亮，遂拿來主義，讀了幾遍代碼后就開工了（我是個急性子呵呵），完成了大部分，最近才找出來測試了下。
2010-11-11 
這篇文章主要介紹了JS實現(xiàn)Cookie讀、寫、刪除操作工具類,涉及javascript針對cookie的讀、寫、刪除、清空等相關操作實現(xiàn)技巧,并附帶了簡單cookie操作插件供大家參考,需要的朋友可以參考下
2018-08-08 
籠統(tǒng)地說，異步在javascript就是延時執(zhí)行。嚴格來說，javascript中的異步編程能力都是由BOM與DOM提供的，如setTimeout，XMLHttpRequest，還有DOM的事件機制，等等很多。這些東西都有一個共同的特點，就是擁有一個回調(diào)函數(shù)，實現(xiàn)控制反轉(zhuǎn)。
2015-04-04 
這篇文章主要介紹了JavaScript實現(xiàn)標題欄文字輪播效果代碼,涉及JavaScript基于時間函數(shù)及流程控制操作標題欄文字的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-10-10 
此樣式基于bootstrap-3.3.0,樣式文件里的源碼行數(shù)都是指的這個版本.這篇文章主要介紹了Bootstrap風格的WPF樣式的相關資料，需要的朋友參考下
2016-12-12