判斷div滑動到底部的scroll實(shí)例代碼
實(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軸分別顯示滾動條 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é)點(diǎn) var st =$(this)[0].scrollTop;//滾動條的高度,即滾動條的當(dāng)前位置到div頂部的距離 if(h+st>=sh){ //上面的代碼是判斷滾動條滑到底部的代碼 //alert("滑到底部了"); $("#scrollTest").append(111+"<br>");//滾動條滑到底部時(shí),只要繼續(xù)滾動滾動條,就會觸發(fā)這條代碼.一直滑動滾動條,就一直執(zhí)行這條代碼。 } }) </script>
以上這篇判斷div滑動到底部的scroll實(shí)例代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript 總結(jié)幾個(gè)提高性能知識點(diǎn)(推薦)
下面小編就為大家?guī)硪黄狫avaScript 總結(jié)幾個(gè)提高性能知識點(diǎn)(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02擴(kuò)展JS Date對象時(shí)間格式化功能的小例子
這篇文章主要介紹了擴(kuò)展JS Date對象時(shí)間格式化功能,有需要的朋友可以參考一下2013-12-12利用WebBrowser徹底解決Web打印問題(包括后臺打?。?/a>
BS架構(gòu)下的打印大家是怎么解決的呢,我最近作了一個(gè)項(xiàng)目正好負(fù)責(zé)這一塊,不僅要求打印頁面的特定部分,還要求有后臺的批量打印,在網(wǎng)上查了一些資料,最后終于解決了。2009-06-06[js高手之路]單例模式實(shí)現(xiàn)模態(tài)框的示例
下面小編就為大家?guī)硪黄猍js高手之路]單例模式實(shí)現(xiàn)模態(tài)框的示例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09一文了解JavaScript中call/apply/bind的使用
這篇文章主要介紹了一文了解JavaScript中call/apply/bind的使用,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下2022-07-07自用js開發(fā)框架小成 學(xué)習(xí)js的朋友可以看看
前段時(shí)間項(xiàng)目需要用到j(luò)s樹,找了好多都不符合項(xiàng)目需求,后來發(fā)現(xiàn)了梅花雪樹和js框架,類似C#名稱空間的用法讓我眼前一亮,遂拿來主義,讀了幾遍代碼后就開工了(我是個(gè)急性子呵呵),完成了大部分,最近才找出來測試了下。2010-11-11JS實(shí)現(xiàn)Cookie讀、寫、刪除操作工具類示例
這篇文章主要介紹了JS實(shí)現(xiàn)Cookie讀、寫、刪除操作工具類,涉及javascript針對cookie的讀、寫、刪除、清空等相關(guān)操作實(shí)現(xiàn)技巧,并附帶了簡單cookie操作插件供大家參考,需要的朋友可以參考下2018-08-08JavaScript實(shí)現(xiàn)標(biāo)題欄文字輪播效果代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)標(biāo)題欄文字輪播效果代碼,涉及JavaScript基于時(shí)間函數(shù)及流程控制操作標(biāo)題欄文字的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10