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