解决HTML5中滚动到底部的事件问题


Posted in HTML / CSS onAugust 22, 2019

问题:在H5中,我们有这样的需求:例如有列表的时候,滚动到底部时,需要加载更多。

解决方案:可以采用window的滚动事件进行处理

分析:如果滚动是针对整个屏幕而言的(不针对于某个界面小块),那么这个应该是是成立的:屏幕的高度+最大滚动的距离 = 内容的高度

代码实现:

 

<html> 
    <head> 
    <meta charset="UTF-8">
        <title>监听滚动到底部滚动底部</title> 
        <style> 
.div2{
width:100px;
height:100px;
border:1px solid red
}
*{
margin:0
}
.button1:active{
   background:red
}
body{
height:375px;
width:667px;
border:1px solid red
}
.div1{
height:600px;
width:100%;
background:red
}
.div2{
height:600px;
width:100%;
background:green
}
.div3{
height:600px;
width:100%;
background:blue
}
.div4{
height:600px;
width:100%;
background:yellow
}
        </style> 
    </head> 
    <body > 
    <div class="div0">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    </div>
    </body> 
    <script>
    window.onload = function(){
  //获取容器父元素
    var div0 = document.getElementsByClassName('div0')[0];
    //height 计算属性的高度
    var height = parseInt((window.getComputedStyle(div0, null).height).replace('px', ''));
    console.log(height,"div0的计算高度")
    window.onscroll = function(){
/*
scrollTop 为滚动条顶端距离界面右上角的距离,这里采用了兼容性写法
*/
let scrollTop = document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
     //+-5是为了保证一定的弹性,并非要刚好相等才出发,
    if(height-5<=scrollTop+clientHeight&&scrollTop+clientHeight<=height+5){
      console.log('监听成功','到达底部')
    }
    }
    }
    </script>
</html>

代码的相关说明:很多时候,列表加载,我们不能够把装载子元素的父容器高度设死,此时采用style设置为auto时,element.style.height也会等于auto ,建议采用clientHeight或者利用计算样式 getComputedStyle计算高度

总结

以上所述是小编给大家介绍的解决HTML5中滚动到底部的事件问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
css3截图_动力节点Java学院整理
Jul 11 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
css3的transition属性详解
Dec 15 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
Html5与App的通讯方式详解
Oct 24 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 #HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 #HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 #HTML / CSS
HTML5自定义属性的问题分析
Aug 16 #HTML / CSS
HTML5实现视频弹幕功能
Aug 09 #HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 #HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 #HTML / CSS
You might like
学习php设计模式 php实现状态模式
2015/12/07 PHP
laravel model 两表联查示例
2019/10/24 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
图解js图片轮播效果
2015/12/20 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
Python3搜索及替换文件中文本的方法
2015/05/22 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
国外平面设计第一市场:99designs
2016/10/25 全球购物
业务经理岗位职责
2013/11/11 职场文书
优秀的计算机专业求职信范文
2013/12/27 职场文书
自动化职业生涯规划书范文
2014/01/03 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python
JUnit5常用注解的使用
2021/07/02 Java/Android
Python四款GUI图形界面库介绍
2022/06/05 Python