实现div内部滚动条滚动到底部和顶部的代码
程序员文章站
2022-03-19 22:22:42
实例如下所示：
</tit...</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></title>
<style type="text/css">
.scrolldiv{
width: 500px;
height: 400px;
margin: 10px auto;
background: #f00;
overflow-y: scroll;
padding: 10px;
}
</style>
</head>
<body>
<div class="scrolldiv" id="testdiv">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<script type="text/javascript">
var divscroll=document.getelementbyid('testdiv');
function divscroll(){
var scrolltop=divscroll.scrolltop;//页面上卷的高度
var wholeheight=divscroll.scrollheight;//页面底部到顶部的距离
var divheight=divscroll.clientheight;//页面可视区域的高度
if(scrolltop+divheight>=wholeheight){
alert('我到底部了');
}
if(scrolltop==0){
alert('我到顶部了')；
}
}
divscroll.onscroll=divscroll;
</script>
</body>
</html></pre>
</div>
<p>以上这篇实现div内部滚动条滚动到底部和顶部的代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。</p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/252769.html">
AMD CPU日本零售份额突破50% 历史性超越Intel </a>
</p>
<p>
下一篇： <a href="/article/252771.html">
算法开发常用软件列表 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/1913179.html" target="_blank" title="实现div滚动条默认最底部以及默认最右边的示例代码">
<h2>
实现div滚动条默认最底部以及默认最右边的示例代码 </h2>
</a>
</li>
<li>
<a href="/article/1627811.html" target="_blank" title="实现div滚动条默认最底部以及默认最右边的示例代码">
<h2>
实现div滚动条默认最底部以及默认最右边的示例代码 </h2>
</a>
</li>
<li>
<a href="/article/1627824.html" target="_blank" title="实现div内部滚动条滚动到底部和顶部的代码">
<h2>
实现div内部滚动条滚动到底部和顶部的代码 </h2>
</a>
</li>
<li>
<a href="/article/978667.html" target="_blank" title="实现div滚动条默认最底部以及默认最右边的示例代码">
<h2>
实现div滚动条默认最底部以及默认最右边的示例代码 </h2>
</a>
</li>
<li>
<a href="/article/705059.html" target="_blank" title="div内部滚动条滚动到底部和顶部功能的实现">
<h2>
div内部滚动条滚动到底部和顶部功能的实现 </h2>
</a>
</li>
<li>
<a href="/article/586134.html" target="_blank" title="div内部滚动条滚动到底部和顶部功能的实现">
<h2>
div内部滚动条滚动到底部和顶部功能的实现 </h2>
</a>
</li>
<li>
<a href="/article/346475.html" target="_blank" title="实现div滚动条默认最底部以及默认最右边的示例代码">
<h2>
实现div滚动条默认最底部以及默认最右边的示例代码 </h2>
</a>
</li>
<li>
<a href="/article/252770.html" target="_blank" title="实现div内部滚动条滚动到底部和顶部的代码">
<h2>
实现div内部滚动条滚动到底部和顶部的代码 </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>