判断div滑动到底部的scroll实例代码

2024-05-06 16:40:55

字体：大中小

来源：转载

供稿：网友

实例如下所示：

<!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实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：判断滚动条滑到底部触发事件(实例讲解)

下一篇：实现div滚动条默认最底部以及默认最右边的示例代码