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 ...
随机推荐
- 文本框的SelectionDirection属性
代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 在子组件中触发事件，传值给父组件-vue
1.通过$emit触发事件 在子组件<x-test>中触发事件: <button @click="toSearchProduct()">搜索</but ...
- python-数据驱动
1.parameterized.parameterized import unittest from parameterized import parameterized,param class Te ...
- shiro安全框架学习-1
1. apche shiro 是Java的一个安全)框架 2.shiro可以非常容易的开发出足够好的应用,不仅可以在JavaSE环境,也可用在JavaEE环境 3. shiro可以完成 认证,授权,加 ...
- linux运维、架构之路-正则表达式
一.通配符的含义 符号 参数说明 其他说明 | 管道 把前一个命令结果通过管道传递给后面一个命令 ; 命令的分隔符 ll /oldboy/;cat oldboy.tx . 表示当前目录 * 匹配文本或 ...
- NVMe固态硬盘工具箱使用说明
https://www.bilibili.com/read/cv562989/ 浦科特NVMe固态硬盘工具箱使用说明 数码 2018-6-7 687阅读7点赞3评论 浦科特已经推出针对NVMe固态硬盘 ...
- Leetcode_1278. Palindrome Partitioning III_[DP]
题目链接 You are given a string s containing lowercase letters and an integer k. You need to : First, ch ...
- Flask学习 2修改路由规则 传入参数访问url
#!/usr/bin/env python # encoding: utf-8 """ @version: v1.0 @author: cxa @file: flask0 ...
- 使用debugger在程序中加入断点
使用debugger在程序中加入断点 版权声明:本文为博主原创文章,未经博主允许不得转载. 我们可以在程序中加入debugger语句,这样Firefox的调试工具会停留在这条语句上,代码也暂停执行,和 ...
- POI 单元格类型CellType
1.单元格类型 单元格的内容决定了单元格的类型,POI中定义的7种单元格类型: 2.示例 cell_0.setCellType(CellType.STRING);//字符串 日期数据对应的单元格类型是 ...