判斷div滑動(dòng)到底部的scroll實(shí)例代碼

更新時(shí)間：2017年11月15日 09:02:11 作者：qq_27511945

下面小編就就為大家分享一篇判斷div滑動(dòng)到底部的scroll實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

實(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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript實(shí)現(xiàn)手勢(shì)識(shí)別的示例詳解
這篇文章主要為大家詳細(xì)介紹了JavaScrip如何利用?TensorFlow.js?中的?HandPose?模型,實(shí)現(xiàn)一個(gè)基于視頻流的手勢(shì)識(shí)別系統(tǒng),感興趣的可以了解下
2024-12-12
微信小程序?qū)崿F(xiàn)簡(jiǎn)易計(jì)算器
這篇文章介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)易計(jì)算器的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06
js將long日期格式轉(zhuǎn)換為標(biāo)準(zhǔn)日期格式實(shí)現(xiàn)思路
本文為大家詳細(xì)介紹下js將long日期格式轉(zhuǎn)換為標(biāo)準(zhǔn)日期格式,感興趣的朋友可以參考下哈，希望可以幫助到你
2013-04-04
JavaScript Promise啟示錄
近幾年隨著JavaScript開發(fā)模式的逐漸成熟，CommonJS規(guī)范順勢(shì)而生，其中就包括提出了Promise規(guī)范，Promise完全改變了js異步編程的寫法，讓異步編程變得十分的易于理解
2014-08-08
Array 重排序方法和操作方法的簡(jiǎn)單實(shí)例
下面小編就為大家簡(jiǎn)單的介紹Array中reverse(),sort(),concat(),slice(),splice()方法的應(yīng)用。一起過來看看吧
2014-01-01
一些javascript一些題目的解析
今天做了群友發(fā)的一個(gè)鏈接, 關(guān)于js 的一些題目的. 這樣的題目常常有很多陷阱在里面,等著別人去踩. 很不幸,灑家踩了, 還蠻悲劇.
2010-12-12
javascript 獲取所有id中包含某關(guān)鍵字的控件的實(shí)現(xiàn)代碼
獲取某容器控件中id包含某字符串的控件id列表
2010-11-11
潛說js對(duì)象和數(shù)組
潛說js對(duì)象和數(shù)組對(duì)象是一個(gè)無序?qū)傩约? 每個(gè)屬性都有自己的名字和值
2011-05-05
基于Bootstrap下拉框插件bootstrap-select使用方法詳解
這篇文章主要為大家詳細(xì)介紹了基于Bootstrap下拉框插件bootstrap-select的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-08-08
typescript基本數(shù)據(jù)類型HTMLElement與Element區(qū)別
這篇文章主要為大家介紹了typescript基本數(shù)據(jù)類型HTMLElement與Element區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11