html5横向滚动(解决HTML5中滚动到底部的事件问题)
类别:Web前端 浏览量:314
时间:2021-10-02 01:33:19 html5横向滚动
解决HTML5中滚动到底部的事件问题问题:在H5中,我们有这样的需求:例如有列表的时候,滚动到底部时,需要加载更多。
解决方案:可以采用window的滚动事件进行处理
分析:如果滚动是针对整个屏幕而言的(不针对于某个界面小块),那么这个应该是是成立的:屏幕的高度+最大滚动的距离 = 内容的高度
代码实现:
<html> <head> <meta charset="UTF-8"> <title>监听滚动到底部滚动底部</title> <style> .li2{ width:100px; height:100px; border:1px solid red } *{ margin:0 } .button1:active{ background:red } body{ height:375px; width:667px; border:1px solid red } .li1{ height:600px; width:100%; background:red } .li2{ height:600px; width:100%; background:green } .li3{ height:600px; width:100%; background:blue } .li4{ height:600px; width:100%; background:yellow } </style> </head> <body > <li class="li0"> <li class="li1"></li> <li class="li2"></li> <li class="li3"></li> <li class="li4"></li> <li class="li5"></li> </li> </body> <script> window.onload = function(){ //获取容器父元素 var li0 = document.getElementsByClassName('li0')[0]; //height 计算属性的高度 var height = parseInt((window.getComputedStyle(li0, null).height).replace('px', '')); console.log(height,"li0的计算高度") 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中滚动到底部的事件问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣
- html5 canvas touch(html5 canvas手势解锁源码分享)
- html5如何使用svg(将SVG图引入到HTML页面的实现)
- h5抽奖的弹框制作(html5实现九宫格抽奖可固定抽中某项奖品)
- 只用html5简单动画代码(HTML5 3D书本翻页动画的实现示例)
- html5清除浮动的方法(HTML5实现移动端点击翻牌功能)
- HTML5 <figure> 、<figcaption>标签
- html5 布局设计(Html5导航栏吸顶方案原理与对比实现)
- html5应用的几个建议
- html5开发的app(浅谈Html5页面打开app的一些思考)
- html5video怎么用(html5视频媒体标签video的使用方法及完整参数说明详解)
- html语法规范解释(浅析HTML5 Landmark)
- html5中table属性(Html5之自定义属性data-,dataset)
- h5实现弹出悬浮窗(Html5监听手机摇一摇事件的实现)
- html5弹出窗口(Html5页面上如何禁止手机虚拟键盘弹出)
- html5canvas图形怎么打印(HTML5 Canvas 实现K线图的示例代码)
- html5发送文字特效(HTML5调用手机发短信和打电话功能)
- 《寄生虫》 三观不正 人类悲欢从来不相通,感同身受也并非本能(寄生虫三观不正)
- 这部动漫中的女孩子,可比101女孩更加励志(这部动漫中的女孩子)
- 《白狐的人生》热拍 贾征宇偶像包袱难自弃 图(白狐的人生热拍)
- 七夕取消了,牛郎织女没做核酸七夕已经取消(牛郎织女没做核酸七夕已经取消)
- 网友抵制 多地取消 夏日祭 为何惹众怒(网友抵制多地取消)
- 兄弟萌,今年的七夕又取消了 思考 思考(今年的七夕又取消了)
热门推荐
- 怎样使用python图像处理(Python Image模块基本图像处理操作小结)
- 给页面加上运行代码功能
- dedecms如何发表文章(dedecms实现调用所有顶级栏目下最新文章的方法)
- 将docker中的镜像打包教程(本地使用docker打包部署镜像的方法)
- nginx的15种优化方案(Nginx开启Brotli压缩算法实现过程详解)
- mysql锁类型大全(简单了解 MySQL 中相关的锁)
- idea发布项目在tomcat哪个目录下(idea发布web项目后Tomcat服务器找不到该项目的问题及解决方法)
- javascript如何转换int型(浅谈JavaScript中的parseInt的妙用)
- java实现数据库备份(MySQL基于java实现备份表操作)
- sql server2012下载安装教程(SQL Server 2012 安装与启动图文教程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9