问题：在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中滚动到底部的事件的更多相关文章

  1. js 滚动条滚动到底部触发事件

    一.前言 在开发项目时,常常需要展示大量数据.如果全部显示出来,数据相对少时,看不出来什么不同,如果数据很多时,一次请求全部显示,这就相当可怕了. 面对这种问题,PC里使用了分页效果,将数据分成一页页 ...

  2. js滚动条滚动到底部触发事件

    $("#contain").scroll(function(){ var $this =$(this), viewH =$(this).height(),//可见高度 conten ...

  3. H5中滚动卡顿的问题

    加入-webkit-overflow-scrolling: touch;即可

  4. 滚动到底部加载更多及下拉刷新listview的使用

    最新内容建议直接访问原文:滚动到底部加载更多及下拉刷新listview的使用 本文主要介绍可同时实现下拉刷新及滑动到底部加载更多的ListView的使用. 该ListView优点包括:a. 可自定义下 ...

  5. jQuery 滚动条 滚动到底部（下拉到底部） 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

  6. Android中GridView滚动到底部加载数据终极版

    之前在项目中有一个需求是需要GridView控件,滚动到底部自动加载.但是呢GridView控件并不提供诸如ListView监听滚动到底部的onScrollListener方法,为了实现这样一个效果, ...

  7. 记录WEUI中滚动加载的一个BUG

    最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较 ...

  8. 记录JQ-WEUI中滚动加载的一个BUG

    最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较 ...

  9. 页面滚动到底部自动 Ajax 获取文章

    页面滚动到底部自动 Ajax 获取文章  代码如下 复制代码 var _timer = {};function delay_till_last(id, fn, wait) {    if (_time ...

随机推荐

  1. dsu on tree 学习笔记

    这是一个黑科技,考虑树链剖分后,每个点只会在轻重链之间转化\(log\)次. 考虑暴力是怎么写的,每次枚举一个点,再暴力把子树全部扫一边. \(dsu\ on\ tree.\)的思想就是保留重儿子不清 ...

  2. Mardown加上目录

    适合Jekyll+Github模式下post.html 中加入如下代码,会在页面加载时生成目录结构: 有两种方案: 方案一效果

  3. 变量类型，-数据类型（值类型，引用类型）uint 不有存负数，int，可以存负数，

    俩种命名方法 1.Pascal 命名法,第一个字母大写其它字母小写Userid 2.Camel命名法,所有单第一方写大写,其它小写,骆峰命名法,userId 程序中元素的命名规范项目名:公司名.项目名 ...

  4. Python3解leetcode Count Binary Substrings

    问题描述: Give a string s, count the number of non-empty (contiguous) substrings that have the same numb ...

  5. RxJava学习总结

    1. 概念 Rx是微软.NET的一个响应式扩展.Rx借助可观测的序列提供一种简单的方式来创建异步的,基于事件驱动的程序.Rx就是一种响应式编程,来创建基于事件的异步程序RxJava是一个在 Java ...

  6. Oulipo （poj3461

    Oulipo Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 29759   Accepted: 11986 Descript ...

  7. C# 图片剪切与缩小的实例

    public void CutToF(Stream stream) { Image initImage = Image.FromStream(stream, true); && ini ...

  8. NOIp 数学 (小学奥数)

    Basic knowledge \[ C_n^m=\frac{n!}{m!(n - m)!} \] 快速幂 // Pure Quickpow inline int qpow(int n, int m, ...

  9. linux使用apache发布静态html网页

    环境 centOS7+httpd 安装httpd 安装 #检查是否安装和httpd rpm -qa | grep httpd #如果没安装 yum -y install httpd 启动httpd并验 ...

  10. win2019

    slmgr /upkslmgr /ipk N69G4-B89J2-4G8F4-WWYCC-J464Cslmgr /skms zh.us.toslmgr /ato