解决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实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 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
下载文件的点击数回填
2006/10/09 PHP
php桌面中心(二) 数据库写入
2007/03/11 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
简单实现js浮动框
2016/12/13 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
Python单例模式实例详解
2017/03/01 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
爱普生美国官网:Epson美国
2018/11/05 全球购物
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
互联网创业计划书的书写步骤
2014/01/28 职场文书
授权委托书样本
2014/04/03 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
正规欠条模板
2015/07/03 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python