需要了解三个dom元素,分别是:clientHeight、offsetHeight、scrollTop。

clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。

offsetHeight:是指元素内容的高度。依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分。

scrollTop:可以理解为滚动条可以滚动的长度。

例如,如果一个DIV高度是400px(即clientHeight为400),而里面的内容是一个很长的列表,内容的高度是1000px(即 offsetHeight为1000)。那么,可见部分我们看到400px,1000px的内容中还有600px不可见。而这不可见的部分呢,正是我们通 过拉动滚动条才能把这一部分显示出来。你如果滚动条不拉动,此时scrollTop为0,如果你把滚动条拉到底,显示出列表最下面的部分,此 时,scrollTop为600。 所以scrollTop的取值区间为[0, 600]。 所以这个600可以理解为滚动条可以滚动的长度。

理解完上面的这个概念之后。要判断是否滚动到底部就很好做了。

首先,我们拉动滚动条,从最上面拉到最下面,变化的是scrollTop的值,而这个值是有一个区间的。
这个区间是: [0, (offsetHeight - clientHeight)]
即,滚动条拉动的整个过程的变化在 0 到 (offsetHeight – clientHeight) 范围之内。

1、判断滚动条滚动到最底端: scrollTop == (offsetHeight – clientHeight)
2、在滚动条距离底端50px以内: (offsetHeight – clientHeight) – scrollTop <= 50
3、在滚动条距离底端5%以内: scrollTop / (offsetHeight – clientHeight) >= 0.95

如果要实现拉到底部自动加载内容。只要注册个滚动条事件:

scrollBottomTest =function(){
         $("#contain").scroll(function(){
              var $this =$(this),
              viewH =$(this).height(),//可见高度
              contentH =$(this).get(0).scrollHeight,//内容高度
              scrollTop =$(this).scrollTop();//滚动高度
             //if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容
                  if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容
             // 这里加载数据..
            }
        });
     }

JS实现判断滚动条滚到页面底部并执行事件的方法的更多相关文章

  1. jquery如何判断滚动条滚到页面底部并执行事件

    首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那 ...

  2. jQuery判断滚动条滚到页面底部脚本

    原文地址 http://www.111cn.net/wy/jquery/61741.htm

  3. javascript&jquery 判断滚动到页面底部

      js 判断滚动到页面底部 CreateTime--2018年4月14日10:13:07 Author:Marydon 1.使用场景: 滚动到屏幕底部,触发加载分页数据请求(qq空间,手机端) 2. ...

  4. JS如何判断滚动条是否滚到底部

    判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight.   scrollTop为滚动条在Y轴上的滚动距离.   clientHeigh ...

  5. JS判断是否到达页面底部

    <script type="text/javascript">//判断整个文档到底部$(window).scroll(function(){    //滚动条所在位置的 ...

  6. jquery判断滚动条是否到底部

    clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight ...

  7. selenium,滚到页面底部的方法

    你可以用 execute_script方法来处理这个. 调用原生javascript的API,这样你想滚到哪里就能滚到哪里.   下面的代码演示了如何滚到页面的最下面:   driver.execut ...

  8. JQuery 判断滚动条是否到底部

    BottomJumpPage: function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).he ...

  9. JS实现滚动条滚到页面距离底部300px时执行事件的方法

    scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容可视区域的高度. scrollHeight为内容可视区域的高度加上溢出(滚动)的距离 $(window).scroll(f ...

随机推荐

  1. 消息传递 树形DP

    非常妙的树形DP:由于n很小,我们可以枚举每一个点作为第一个节点,计算其时间花费 那么问题就转化为对于给点节点求花费时间. 通过观察,显然我们会发现先传给花费时间多的人更加合算,因为这样可以最大限度的 ...

  2. AOJ.863 分书问题 (DFS)

    题意分析 现有n个人,n种书,给出每人对n种书的喜欢列表,求有多少种方案满足以下条件: 1.每个人都分得自己喜欢的书: 2.每个人分得书的种类各不相同,即所有种类的书均得到分配 1.采用生成测试法 生 ...

  3. ACM数学

     1.burnside定理,polya计数法 这个专题我单独写了个小结,大家可以简单参考一下:polya 计数法,burnside定理小结 2.置换,置换的运算 置换的概念还是比较好理解的,< ...

  4. lamp 源码安装

    #!/bin/bash #description:mysql-.tar apache2.4.23 php5.6.27 function check_ok(){ ] then echo "-- ...

  5. 三大linux系统对比

    概述: centos作为服务器部署是第一选择.CentOS去除很多与服务器功能无关的应用,系统简单但非常稳定,命令行操作可以方便管理系统和应用,丰富的帮助文档和社区的支持. ubuntu最佳的应用领域 ...

  6. iptables使用总结

    推荐博文: http://www.zsythink.net/archives/1199 http://www.cnblogs.com/migongci0412/p/5198370.html 总结: 1 ...

  7. Spring 源码学习(1) —— 自定义标签

    Spring 工作流程是先加载解析xml配置文件:配置文件中存在默认的标签,也可以自定义标签.解析默认标签调用: private void parseDefaultElement(Element el ...

  8. jQuery Lightbox效果插件Boxer

    演示:http://www.jq22.com/yanshi1139 下载:链接: https://pan.baidu.com/s/1o8zaV2q 密码: 2ccy Boxer 是一款基于 jQuer ...

  9. UVA 1640 The Counting Problem

    https://vjudge.net/problem/UVA-1640 题意:统计区间[l,r]中0——9的出现次数 数位DP 注意删除前导0 #include<cmath> #inclu ...

  10. Codeforces Round #380 (Div. 2)/729E Subordinates 贪心

    There are n workers in a company, each of them has a unique id from 1 to n. Exaclty one of them is a ...