scrollTop为滚动条在Y轴上的滚动距离。

clientHeight为内容可视区域的高度。

scrollHeight为内容可视区域的高度加上溢出(滚动)的距离

$(window).scroll(function(){
  var scrollTop = $(this).scrollTop();
  var scrollHeight = $(document).height();
  var windowHeight = $(this).height();
  if(scrollHeight-scrollTop-windowHeight <=300){
//当滚动条滚动到距离底部还有300px的时候加载类容
  }else{
//当滚动条滚动到距离底部大于300px的时候加载类容
}
});

JS实现滚动条滚到页面距离底部300px时执行事件的方法的更多相关文章

  1. 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  2. 在Angular.js中的H5页面调用Web api时跨域问题处理

    /// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...

  3. ListView组件中 onEndReached 方法在滚动到距离列表最底部一半时执行

    初次使用ListView,在写列表滚动到最底部自动加载使用到方法onEndReached, 发现: ListView组件中 onEndReached 方法在滚动到距离列表最底部一半时执行, 于是翻看文 ...

  4. js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到

    js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到 2.图2的内容为directionkey.js的内容

  5. JS实现判断滚动条滚到页面底部并执行事件的方法

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

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

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

  7. selenium + python 怎样才能滚到页面的底部?

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

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

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

  9. js 判断滚动条是不是在浏览器底部

    http://jingyan.baidu.com/album/86f4a73e91da7837d65269d5.html?picindex=2

随机推荐

  1. C#读取文件为byte数组

    private byte[] FileContent(string fileName) { using (FileStream fs = new FileStream(fileName, FileMo ...

  2. 用python实现远程复制 (scp + expect )

    scp 功能很强大,但需要人工输入 password, 当然可以通过把 公钥保存在远程主机的 ~/.ssh 目录中,而后就不用输入password,但这需要配置. 用 sshpass 可能在命令输入 ...

  3. Codeforces 711 C. Coloring Trees (dp)

    题目链接:http://codeforces.com/problemset/problem/711/C 给你n棵树,m种颜色,k是指定最后的完美值.接下来一行n个数 表示1~n树原本的颜色,0的话就是 ...

  4. c++字符串机理

    在windows编程中,由于编码方式的不同和c与c++的不同而造成了许多复杂的有关字符串之间的转换 首先,windows编码方式有ANSCLL和UNICODE,前者是单字符的,后者是双字符的. 然后, ...

  5. css 文字超出变 ... 点点点

    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

  6. URAL 1233 - Amusing Numbers

    首先计算出k至少为第几位,如果m小于这个数,那么输出0 还有一种情况, 就是10的i次方的这种情况,如果i+1等于m,那么直接输出k,否则输出0 其他的情况,就是二分,然后判断计算其插入到k之前的数的 ...

  7. cocos2d-x (Android)之-那些常见的error记

    转自:http://blog.csdn.net/callchunli/article/details/8929813 (2013/9/2) build.xml:939: java.lang.Array ...

  8. Hadoop on Mac with IntelliJ IDEA - 6 解决KeyValueTextInputFormat读取时只有key值问题

    本文讲述使用KeyValueTextInputFormat在Hadoop 0.x正常工作.Hadoop 1.2.1失效的解决过程. 环境:Mac OS X 10.9.5, IntelliJ IDEA ...

  9. Keil AGDI Header File

    #ifndef __AGDI__INCED___ #define __AGDI__INCED___ //---Revision History: --------------------------- ...

  10. IE下实现类似CSS3 text-shadow文字阴影的几种方法

    IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...