实现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内部滚动条滚动到底部和顶部的代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JavaScript 事件代理需要注意的地方，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下2020-09-09
这篇文章主要给大家介绍了关于ECharts数据可视化基本使用之常用图表类型的相关资料,echarts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了如何实现js页面切换功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要为大家介绍了高性能JavaScript循环语句和条件语句，感兴趣的小伙伴们可以参考一下2016-01-01
我们知道，动画其实是由一帧一帧的图像构成的。有Web动画那么就会存在该动画在播放运行时的帧率。而帧率在不同设备不同情况下又是不一样的。有的时候，一些复杂或者重要动画，需要实时监控它们的帧率，从而更好的优化它们，本文就是介绍Web动画帧率（FPS）计算方法。2021-05-05
这篇文章主要介绍了JavaScript实现构造json数组的方法,结合实例形式对比分析了javascript构造json数组的实现方法及相关操作注意事项,需要的朋友可以参考下2018-08-08
这篇文章主要给大家介绍了关于JavaScript中变量提升和函数提升的相关资料,以及JS变量提升和函数提升的顺序,文中给出了详细的介绍,需要的朋友可以参考下2021-07-07
这篇文章主要为大家详细介绍了openLayer4实现动态改变标注图标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了js下拉选择框与输入框联动实现添加选中值到输入框的方法,涉及javascript中onchange事件及页面元素遍历的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
Javascript技术难点之apply，call与this之间的衔接
这篇文章主要介绍了Javascript技术难点之apply，call与this之间的衔接的相关资料,需要的朋友可以参考下2015-12-12
最新评论