判断div滑动到底部的scroll实例代码
程序员文章站
2022-03-19 22:22:00
实例如下所示：
判断div滑到...</div>
<div class="content">
<p><span style="background-color: #ccffcc"><strong>实例如下所示：</strong></span></p>
<div class="jb51code">
<pre class="brush: javascript;">
<!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></pre>
</div>
<p>以上这篇判断div滑动到底部的scroll实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。</p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/252781.html">
华为详解5G双模手机优势：SA、NSA网络都能用 还能双卡双待 </a>
</p>
<p>
下一篇： <a href="/article/252783.html">
外媒爆料华为鸿蒙OS正小规模测试：最快有望同步Mate 30发布 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2098282.html" target="_blank" title="div scroll始终在最底部的实现代码">
<h2>
div scroll始终在最底部的实现代码 </h2>
</a>
</li>
<li>
<a href="/article/1973727.html" target="_blank" title="微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码">
<h2>
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码 </h2>
</a>
</li>
<li>
<a href="/article/1955323.html" target="_blank" title="jQuery滑动到底部加载下一页数据的实例代码">
<h2>
jQuery滑动到底部加载下一页数据的实例代码 </h2>
</a>
</li>
<li>
<a href="/article/1913207.html" target="_blank" title="Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码">
<h2>
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码 </h2>
</a>
</li>
<li>
<a href="/article/1654207.html" target="_blank" title="js 原生判断内容区域是否滚动到底部的实例代码">
<h2>
js 原生判断内容区域是否滚动到底部的实例代码 </h2>
</a>
</li>
<li>
<a href="/article/1627747.html" target="_blank" title="Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码">
<h2>
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码 </h2>
</a>
</li>
<li>
<a href="/article/1627749.html" target="_blank" title="判断div滑动到底部的scroll实例代码">
<h2>
判断div滑动到底部的scroll实例代码 </h2>
</a>
</li>
<li>
<a href="/article/1570785.html" target="_blank" title="div scroll始终在最底部的实现代码">
<h2>
div scroll始终在最底部的实现代码 </h2>
</a>
</li>
<li>
<a href="/article/1273939.html" target="_blank" title="微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码">
<h2>
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码 </h2>
</a>
</li>
<li>
<a href="/article/978590.html" target="_blank" title="Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码">
<h2>
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>