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 ...
随机推荐
- [SDOI2015]寻宝游戏（LCA，set）
[SDOI2015]寻宝游戏 题目描述 小B最近正在玩一个寻宝游戏,这个游戏的地图中有N个村庄和N-1条道路,并且任何两个村庄之间有且仅有一条路径可达.游戏开始时,玩家可以任意选择一个村庄,瞬间转移到 ...
- CF9D How many trees? (dp)
这题我想了好久 设 \(f_{i,j}\) 为 \(i\) 结点 \(<=j\) 的方案数 固定根,枚举左右子树,就有: \[f_{i,j}=\sum_{k=0}^{n-1}f_{k,j-1}* ...
- Vue.js 技术揭秘学习 （1） new Vue 发生了什么
Vue 初始化主要就干了几件事情,合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data.props.computed.watcher 等等.
- 【leetcode】1089. Duplicate Zeros
题目如下: Given a fixed length array arr of integers, duplicate each occurrence of zero, shifting the re ...
- @ControllerAdvice全局数据预处理
在传统项目的Controller的方法中传入参数,对象中的属性相同时,会出现以下错误 Book类和Author类 这是因为两个对象中的name相同,传参时分不清西游记和六小龄童 ...
- php array_slice()函数 语法
php array_slice()函数 语法 作用:在数组中根据条件取出一段值,并返回.大理石平台支架 语法:array_slice(array,start,length,preserve) 参数: ...
- php strtotime,mktime,DateTime函数处理时间累加问题
时间戳(年月日时分秒) 使用strtotime函数,结合+1 month,-1 month,next month,last month的时候会出现一些问题. demo示例: //时间"20 ...
- win7系统下安装Splash。
参考地址:https://www.jianshu.com/p/4052926bc12c 期间遇到的问题: 关于virtualbox的问题: 启动虚拟机失败 http://www.cnblogs.com ...
- legend3---1、meedu安装
legend3---1.meedu安装 一.总结 一句话总结: 视频的安装教程做主菜,辅以文档安装教程做配料,口感甚佳. 1.为什么不直接从github下载文件的发行版,而要选择composer方式安 ...
- springboot编程之全局异常捕获
springboot编程之全局异常捕获 1.创建GlobalExceptionHandler.java,在类上注解@ControllerAdvice, 在方法上注解@ExceptionHandler( ...