判断div滑动到底部的scroll实例代码
更新时间:2017年11月15日 09:02:11 作者:qq_27511945
下面小编就就为大家分享一篇判断div滑动到底部的scroll实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
实例如下所示:
<!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实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
JavaScript的setAttribute兼容性问题解决方法
JavaScript的setAttribute存在兼容性问题,下面与大家分享下具体的解决方法,感兴趣的朋友可以参考下2013-11-11JavaScript使用Promise封装Axios进行高效开发
这篇文章主要介绍了JavaScript使用Promise封装Axios进行高效开发,Axios是一个基于Promise的HTTP库,它可以帮助我们更方便地发起HTTP请求,并且提供了许多高级功能,感兴趣的同学可以参考下文2023-05-05用 js 的 selection range 操作选择区域内容和图片
本篇文章主要介绍了用js的selection range操作选择区域内容和图片的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04微信小程序使用uni-app和springboot实现一键登录功能(JWT鉴权)
微信一键登录是指用户在使用小程序时,可以通过微信账号进行快速登录,而无需额外的注册和密码设置,这篇文章主要给大家介绍了关于微信小程序使用uni-app和springboot实现一键登录功能的相关资料,需要的朋友可以参考下2023-11-11
最新评论