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 video 事件(HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题)
- html5video怎么用(html5视频媒体标签video的使用方法及完整参数说明详解)
- h5实现弹出悬浮窗(Html5监听手机摇一摇事件的实现)
- html怎么设置地图(HTML5获取当前地理位置并在百度地图上展示的实例)
- Html5新增的标签
- html5功能讲解(Html5定位终极解决方案)
- html5怎么设置红色(详解HTML5如何使用可选样式表为网站或应用添加黑暗模式)
- html5定位教学(Html5 webview元素定位工具的实现)
- html5底部组件(HTML5 Blob对象的具体使用)
- html5按钮点击跳转(HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题)
- HTML5<q> 与 <blockquote> 的区别
- html5炫酷代码(HTML5实现视频弹幕功能)
- html5视频播放(使用HTML5加载音频和视频的实现代码)
- html5自定义字体图标(HTML5给汉字加拼音收起展开组件的实现代码)
- html5标签怎么做(html5用video标签流式加载的实现)
- html5 固定图片(HTML5拖放API实现自动生成相框功能)
- 释小龙晒杀青照片 多重身份惹观众期待(释小龙晒杀青照片)
- 《九牛之人降魔传》开机 演员祁高坤化身九牛之人除魔卫道(九牛之人降魔传开机)
- 王铲铲的致富之路无限金币卡法攻略教学(王铲铲的致富之路无限金币卡法攻略教学)
- 文明6金币太少怎么办 文明6无限刷钱教程(文明6金币太少怎么办)
- 开国中将,王牌军63军首任政委,两个连襟一个上将一个少将传为佳话(王牌军63军首任政委)
- 臭名昭著的731部队最高负责人 石井四郎(臭名昭著的731部队最高负责人)
热门推荐
- jquery中hasClass()、is()判断是否包含指定的class
- docker同步宿主机配置(docker容器间跨宿主机通信-基于overlay的实现方法)
- ASP.NET根据IP获取省市地址
- navicat连接mysql是远程连接吗(详解Navicat远程连接mysql很慢)
- 正则表达式中/i,/g,/ig,/gi,/m的含义
- C#中ArrayList与Array的区别
- 怎样在云服务器上搭建宝塔面板(利用宝塔面板同步服务器时间的实现方法)
- dede友情链接改为logo轮播教程(织梦dede调用四级栏目的实现方法)
- 云服务器哪个公司适合做(企业云服务器适用企业有哪些?)
- CSS3动画属性animation