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

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的时候加载类容
}
});

时间: 2024-10-26 06:04:43

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

笔记-[js兼容]-滚动条的滚动距离的兼容性问题解决方法。

在我们操作JS实现些效果的时候,可能会涉及到滚动条滚动距离的问题; 在IE和非IE下是存在兼容性问题的 在IE下支持:document.body.scrollTop(scrollLeft);//在ie下获取滚动条距离的属性 在非IE下支持:document.documentElement.scrollTop(scrollLeft);//在非ie下获取滚动条距离的属性 代码兼容: var scrollTop;//定义一个变量名为scrollTop为滚动条的距离 滚动高度 :  var scroll

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

首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop.  clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度.        offsetHeight:是指元素内容的高度.依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分.        scrollTop:这个是什么呢?他可以理解为滚动条可

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

首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight:是指元素内容的高度.依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分. scrollTop:这个是什么呢?他可以理解为滚动条可以滚动的长度. 举例,如果一个

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

可以用 execute_script方法来处理这个. 调用原生javascript的API,这样你想滚到哪里就能滚到哪里. 下面的代码演示了如何滚到页面的最下面: driver.execute_script("window.scrollTo(0, document.body.scrollHeight);") window : JS window 对象 window的scrollTo 方法: 可以滚到页面上的任何位置. scrollHeight:是dom元素的通用属性.document.

判断滚动条滚到页面底部并执行事件

clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight:是指元素内容的高度.依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分. scrollTop:这个是什么呢?他可以理解为滚动条可以滚动的长度. 举例,如果一个DIV高度是400px(即clientHeight为400),而里面的内容是一个很长的列表,内容的高度是1

当滚动条滚到一定距离,div实现实现效果

1 window.onscroll=function () { 2 var sTop=document.body.scrollTop; 3 var WH=document.body.clientHeight; 4 var con=document.getElementById('con'); 5 var dTop=con.offsetTop; 6 7 if (sTop>=dTop-(WH-100)) { 8 //执行动画 9 }; 10 }

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

2.图2的内容为directionkey.js的内容

如何在页面完全加载后执行JS

使用Script中的Defer属性.script中的defer属性默认情况下是false的.也就是说:如果是编写脚本的时候加入defer属性,那么浏览器在下载脚本的时候就不必立即对其进行处理,而是继续对页面进行下载和解析,这样会提高下载的性能.这样的情况有很多种.比如你定义了很多javascript变量,或者在引用文件(.inc)中写了很多的脚本需要处理,那不妨在这些脚本中加入defer属性,对性能的提高肯定有所帮助.举例如下:<script language="javascript&qu

js中页面加载完成后执行的几种方式及执行顺序

在js和jquery使用中,经常使用到页面加载完成后执行某一方法.通过整理,大概是五种方式(其中有的只是书写方式不一样). 1:使用jQuery的$(function){}; 2:使用jquery的$(document).ready(function(){});前两者本质上没有区别,第1种是第2种的简写方式.两个是document加载完成后就执行方法. 3:使用jQuery的$(window).load(function(){}); 4:使用window.onload = function(){