html+监听+页面滚动到底部,解决HTML5中滚动到底部的事件问题
问题:在H5中,我们有这样的需求:例如有列表的时候,滚动到底部时,需要加载更多。
解决方案:可以采用window的滚动事件进行处理
分析:如果滚动是针对整个屏幕而言的(不针对于某个界面小块),那么这个应该是是成立的:屏幕的高度+最大滚动的距离 = 内容的高度
代码实现:
监听滚动到底部滚动底部
.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
}
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('监听成功','到达底部')
}
}
}
代码的相关说明:很多时候,列表加载,我们不能够把装载子元素的父容器高度设死,此时采用style设置为auto时,element.style.height也会等于auto ,建议采用clientHeight或者利用计算样式getComputedStyle计算高度
总结
以上所述是小编给大家介绍的解决HTML5中滚动到底部的事件问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
html+监听+页面滚动到底部,解决HTML5中滚动到底部的事件问题相关推荐
- js监听页面或元素scroll事件,滚动到底部或顶部
基本原理: 1.滚动到底部 元素的滚动距离 + 元素的可视距离 == 元素的滚动条总距离2.滚动到顶部 元素的滚动距离 == 0 监听页面滚动 <!DOCTYPE html> <ht ...
- jq监听页面的滚动事件,
jQuery监听页面的滚动状态,实现代码: $(document).scroll(function() { var scroH = $(document).scrollTop(); // ...
- vue 监听页面滚动事件:触发animate.min.css动画特效
一.问题答疑: 1. animate.css 如何在vue项目中引入?或引用? 2. 如何监听滚动事件,触发animate.class动画播放? vue 监听滚轮滚动事件,for循环 ,动态id,代码 ...
- 监听页面滚动触发事件,页面停止滚动触发事件
监听页面滚动触发事件,页面停止滚动触发事件 核心代码 data() {return {timer: null,isTipVisible: true} } methods: {handleScrollS ...
- vue监听页面滚动事件
方法:监听滚动实现 通过addEventListener方式监听 通过scroll获取到滚动 export default {data () {return {topNavBg: {backgroun ...
- java计算器监听放大缩小,js监听页面放大缩小
demo body[zoom='scale']:before{ content: '您的网页处于缩放状态,请按 Ctrl+0 恢复到浏览器默认大小'; z-index: 9999; position: ...
- 如何监听页面 DOM 变动并高效响应
最近在做 chrome 插件开发,既然是插件那就难免不对现有页面做一些控制,比如事件监听.调整布局.对 DOM 元素的增删改查等等.其中有一个需求比较有意思,便整理一下顺便把涉及到的知识点复习一遍. ...
- oracle本地连接地址,关于Oracle本地连接出现与监听有关的问题的解决方法探讨,oracle本地连接...
关于Oracle本地连接出现与监听有关的问题的解决方法探讨,oracle本地连接 关于Oracle本地连接出现与监听有关的问题的解决方法探讨 监听的作用: 用于应用桌面即用户与数据库服务器建立连接的媒 ...
- win7 oracle启动监听,win7系统oracle监听服务无法打开的解决方法
无论谁在使用电脑的时候都可能会发现oracle监听服务无法打开的问题,oracle监听服务无法打开让用户们很苦恼,这是怎么回事呢,oracle监听服务无法打开有什么简便的处理方式呢,其实只要依照1.如 ...
最新文章
- Redis 笔记(08)— 事务(一次执行多条命令、命令 watch/multi/exec/discard、错误处理)
- ppt结的概念与使用
- 一 Struts2 开发流程
- Java 10:“ var”关键字
- nextshort_Java扫描仪的nextShort()方法与示例
- 怎么把 html做成雪花特效,CSS3 HTML5下雪特效 雪花飘飘
- 【基础】算法时空复杂度【OI缩水版】
- 《剑指Offer》面试题5-替换空格
- java Relative Path and absolute
- 计算机的超级终端程序无法使用,超级终端,教您win7怎么添加超级终端
- 计算机图形学——大作业
- HCNP数通认证考试心得体会
- NKOI 3539 移棋子游戏[6月月赛题A]
- 7款颜值当道的 Linux 操作系统 !
- CodeForces 283C Coin Troubles 分析+背包思想
- 使用ScanShadowsFilter过滤激光雷达拖尾
- 使用Petalinux实现ZYNQ的linux程序开发(实现简单的socket通信程序)
- 5G(一)——DNN及APN
- Windows Support Tools
- MYSQL(老杜数据库笔记)