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. 用 Python 脚本实现对 Linux 服务器的监控

    目前 Linux 下有一些使用 Python 语言编写的 Linux 系统监控工具 比如 inotify-sync(文件系统安全监控软件).glances(资源监控工具)在实际工作中,Linux 系统 ...

  2. mahout算法源码分析之Itembased Collaborative Filtering(四)共生矩阵乘法

    Mahout版本:0.7,hadoop版本:1.0.4,jdk:1.7.0_25 64bit. 经过了SimilarityJob的计算共生矩阵后,就可以开始下面一个过程了,这个过程主要是共生矩阵的乘法 ...

  3. div图片垂直居中 如何使div中图片垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』 点评:关于图片垂 ...

  4. jQuery实现的瀑布流效果, 向下滚动即时加载内容

    下拉滚动条或鼠标滚轮滚动到页面底部时, 动态即时加载新内容. 后台用 json 传输数据, 示例程序中只写了示例数组.数据也只设置了两个属性, 需根据实际应用改写.   页面用了 ul li 做为容器 ...

  5. SQL Server 批量插入数据的两种方法(转)

    此文原创自CSDN TJVictor专栏:http://blog.csdn.net/tjvictor/archive/2009/07/18/4360030.aspx 在SQL Server 中插入一条 ...

  6. c#委托把方法当成参数

    //定义委托,它定义了可以代表的方法的类型 public delegate void GreetingDelegate(string name); /// <summary> /// 用英 ...

  7. DLL文件无法删除怎么解决

    dll文件你听说过吗?那怎样把那些删不掉的东西删掉呢?请看.... 老听网友说某某文件删不掉啊.之类的.而且有很多都是dll文件.删除的时候总是提示,"正在使用"或者是" ...

  8. Failure [INSTALL_FAILED_SHARED_USER_INCOMPATIBLE]

    在Android studio中想要运行程序,点击运行后程序安装失败,报出如下异常: 原因:在manifest中设置了 .android:sharedUserId="android.uid. ...

  9. 收集计算机分区信息,去除列中的重复值(Excel)(空行)

    收集计算机分区信息 $servers = gc D:\serverlist.txt $result = $results = $null $results = @() foreach ($server ...

  10. FluentData官方文档翻译

    开始 要求 .NET 4.0. 支持的数据库 MS SQL Server using the native .NET driver. MS SQL Azure using the native .NE ...