H5中滚动到底部的事件
问题：在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计算高度
H5中滚动到底部的事件的更多相关文章
- js 滚动条滚动到底部触发事件
一.前言 在开发项目时,常常需要展示大量数据.如果全部显示出来,数据相对少时,看不出来什么不同,如果数据很多时,一次请求全部显示,这就相当可怕了. 面对这种问题,PC里使用了分页效果,将数据分成一页页 ...
- js滚动条滚动到底部触发事件
$("#contain").scroll(function(){ var $this =$(this), viewH =$(this).height(),//可见高度 conten ...
- H5中滚动卡顿的问题
加入-webkit-overflow-scrolling: touch;即可
- 滚动到底部加载更多及下拉刷新listview的使用
最新内容建议直接访问原文:滚动到底部加载更多及下拉刷新listview的使用 本文主要介绍可同时实现下拉刷新及滑动到底部加载更多的ListView的使用. 该ListView优点包括:a. 可自定义下 ...
- jQuery 滚动条 滚动到底部（下拉到底部） 加载数据(触发事件、处理逻辑)、分页加载数据
1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...
- Android中GridView滚动到底部加载数据终极版
之前在项目中有一个需求是需要GridView控件,滚动到底部自动加载.但是呢GridView控件并不提供诸如ListView监听滚动到底部的onScrollListener方法,为了实现这样一个效果, ...
- 记录WEUI中滚动加载的一个BUG
最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较 ...
- 记录JQ-WEUI中滚动加载的一个BUG
最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较 ...
- 页面滚动到底部自动 Ajax 获取文章
页面滚动到底部自动 Ajax 获取文章 代码如下 复制代码 var _timer = {};function delay_till_last(id, fn, wait) { if (_time ...
随机推荐
- Redis分布式锁【实战】
概述 目前几乎很多大型网站及应用都是分布式部署的,分布式场景中的数据一致性问题一直是一个比较重要的话题.分布式的CAP理论告诉我们“任何一个分布式系统都无法同时满足一致性(Consistency).可 ...
- bzoj5178 [Jsoi2011]棒棒糖 主席树+线段树二分
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=5178 https://lydsy.com/JudgeOnline/problem.php?id ...
- 网络安全意识有多重要？SamSam勒索软件敲诈了近600万美元
近年来,对于网络犯罪分子来说,勒索软件已成为数百万美元的黑市业务,SamSam就是一个很好的例子. 中国信息安全新研究显示,自2015年12月以来,SamSam勒索软件从受害者手中敲诈了近600万美元 ...
- voc数据集坐标，coco数据集坐标
voc,如上图 x1 ,y1 ,x4, y4 bbox的坐标格式是,x,y的最大最小值,也就是box的左上角和右下角的坐标 coco x,y,w,h box左上角的坐标以及宽.高 图 ...
- 配置 Kibana
Products Cloud Services Customers Learn downloads EN Docs Kibana 用户手册 » 搭建 » 配置 Kibana « 在 Windows ...
- [BZOJ] IOI2015 Boxes纪念品盒
问题描述 IOI2015 开幕式正在进行最后一个环节.按计划在开幕式期间,每个代表队都将收到由主办方发放的一个装有纪念品的盒子.然而所有志愿者都被精彩的开幕式所吸引,除 Aman外其他人完全忘记了发放 ...
- Redirecting to /bin/systemctl restart mysql. service Failed to restart mysql.service: Unit not found.
使用如下命令操作mysql即可: systemctl restart mysqld.service systemctl start mysqld.service systemctl stop mysq ...
- 第三代DRDS分布式SQL引擎全新发布
DRDS (阿里云分布式关系型数据库服务,https://www.aliyun.com/product/drds)于 4 月 30 号发布了 5.3 版本,这是一个年度大更新.主要带来了以下特性: 性 ...
- BZOJ 1597: [Usaco2008 Mar]土地购买 动态规划 + 斜率优化
Code: #include<bits/stdc++.h> #define maxn 1000000 #define ll long long #define x(i) (b[i+1]) ...
- 银联高校极客挑战赛 初赛 第一场 B
自学图论的码队弟弟 试图写非递归求解,然后TLE了一下午==,全程找不到bug,换成递归,一发AC 判断环写得很丑== #include<bits/stdc++.h> using name ...