解决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 相关文章推荐
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
一个更简单的无限级分类菜单代码
2007/01/16 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
javascript 主动派发事件总结
2011/08/09 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
Three.js学习之网格
2016/08/10 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
分析在Python中何种情况下需要使用断言
2015/04/01 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
个人批评与自我批评范文
2014/10/17 职场文书
沈阳故宫导游词
2015/01/31 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
法定代表人身份证明书
2015/06/18 职场文书
毕业证明模板
2015/06/19 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
高三生物教学反思
2016/02/22 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL