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

2020-11-27 来源：钮旅网

实例如下所示：

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

显示全文

全部栏目

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