实现div内部滚动条滚动到底部和顶部的代码
更新时间：2017年11月15日 09:21:19 作者：chaofei_liang
下面笔者就为大家分享一篇实现div内部滚动条滚动到底部和顶部的代码，代码简洁，具有很好的参考价值，希望对大家有所帮助
实例如下所示：
<!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>
以上这篇实现div内部滚动条滚动到底部和顶部的代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
js中Math之random,round,ceil,floor的用法总结
本篇文章是对js中Math之random,round,ceil,floor的用法进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了微信小程序中的生命周期与生命周期函数的介绍，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
IE8提示Invalid procedure call or argument 异常的解决方法
某台机器上，访问公司的好几个产品网站，都抛出很多 Invalid procedure call or argument ，跟进了下，情况最后简化为2012-09-09
时间函数应用加、减、比较、格式转换等等，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
这篇文章主要介绍了js prototype和__proto__的关系是什么，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要为大家介绍了Web Woker常见使用问题及方案解决分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-09-09
最新需要js 文件压缩图片上传 以前没搞过，新手把学习过程分享，对JS HTML图片显示Canvas 压缩功能感兴趣的朋友一起看看吧2017-07-07
这篇文章主要介绍了wx-charts 微信小程序图表插件的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
很多人也许只知道 123，123.456，0xff 之类的数字格式。 其实 js 格式还有很多数字格式类型，比如 1., .1 这样的，也有 .1e2 这样的。2014-05-05
这篇文章主要为大家详细介绍了JavaScript实现鼠标控制自由移动的窗口，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
最新评论