当前位置:首页 > 日记 > 正文

js实现了判断滚动条滚动到页面底部并执行事件的方法。

js实现了判断滚动条滚动到页面底部并执行事件的方法。
你需要知道的三个DOM元素:自己,offsetheight,和scrollTop。

自己:这个元素的高度占整个空间的高度,所以如果一个div有滚动条,高度不包括下面的滚动条的部分,只是一个简单的div的高度

OffsetHeight:它指的是该元素的含量的高低。根据以上,高度在div的高度,包括有形的和无形的部分下的滚动条。

ScrollTop:这是什么他能理解滚动条的长度。

例如,如果一个div高度400px(即自己是400),和里面的内容是一个很长的列表,内容高度1000px(即offsetheight 1000)。所以,在可见光部分,我们看到400px,和1000px内容是不可见的,这部分600px。看不见的是我们能做些什么来拉动滚动条显示这一部分,如果你不拉滚动条,这个时候scrollTop是0,如果你拉动滚动到最后,显示列表的底部,而在这个时候,scrollTop是600。所以对scrollTop值范围{ 0, 600 }。所以这600可以理解为滚动条可以滚动的长度。

理解以上概念后,判断是否滚底是好的。

首先,我们把滚动条从上到下,改变scrollTop值,这个值有一个间隔。

这个区间是:{ 0,(offsetheight -自己)}

这是由滚动条驱动的全过程,其范围在0到(offsetheight -自己)。

1、确定滚动条滚动至底部:scrollTop =(offsetheight -自己)

2,底部比50px少距离的滚动条:(offsetheight -自己)- scrollTop 50

3、滚动底部距离小于5% scrollTop /(offsetheight -自己)> = 0.95

以上。

如果是被拉到底部,内容自动加载。只登记一个滚动条事件:

复制代码代码如下所示:

scrollbottomtest =函数(){

$(#包含)。滚动(函数(){)

var $ = $(这个),

viewh = $(this)(的高度),可见/高度

contenth = $(this),得到(0)。scrollheight /高度

scrollTop = $(this)(。scrollTop); / /滚动的高度

/ /如果(contenth - viewh - scrollTop <= 100){ / / 100px达到底部,添加新的内容

如果(scrollTop /(contenth - viewh){ / / > = 0.95)达到100px的底部,添加新的内容

在这里加载数据。

}

});

}

相关文章

AI混合工具和路径仪使魅族标志教程

AI混合工具和路径仪使魅族标志教程

混合,工具,路径,教程,魅族,本教程介绍给朋友,利用AI混合工具和路径搜索,使魅族的标志。本教程比较简单,但是介绍比较详细,适合初学者学习,推荐给喜欢它的朋友。 本教程将向您介绍AI混合工具和路径搜索器,并制作魅族徽标方法。本教程比较简单,新手…

PS教你画一个晶莹剔透的冰淇淋刷。

PS教你画一个晶莹剔透的冰淇淋刷。

教你,晶莹剔透,冰淇淋,画一,电脑软件,Frost是由许多小晶体组成的,为了模拟霜效果,我们需要创建一个雪花结构笔刷。新建一个文件,填充黑色背景,新建一个图层,用硬笔刷画出下面的结构。 步骤1 Frost是由许多细小的晶体组成的,为了模拟霜效果,我们需…

ajax通用模板实现代码

ajax通用模板实现代码

通用模板,代码,电脑软件,ajax,复制代码代码如下所示: VaR技术; 功能creatxmlhttprequest(){ 如果(窗口。ActiveX对象){ XMLHTTP =新的ActiveX对象(微软。XMLHTTP ); } 如果(窗口。XMLHttpRequest){ XMLHTTP =新的XMLHttpRequest(); } } 功能startreque…

几种常见攻击的正则表达式

几种常见攻击的正则表达式

正则表达式,几种,常见,电脑软件,(的| S)*(exec(的| +)+(S | x)P W +)(的| S)* / /执行命令 (的| S)*((% 3C)|)(的| S)* / /简单的XSS (的| S)*((65)| E)( S)*((76)| V)*((61)|一)*( S)*(% 6c)| L)* (的| S)*((% 3C)|)(的| S)* / /图像XSS (的| S)*((73)| S)( S)*(63)| C( S)*…

使用PS图象处理软件做了个一寸照片

使用PS图象处理软件做了个一寸照片

照片,图象,一寸,处理软件,电脑软件,现在让我们介绍一个8寸照片打印和打印的方法与PS图象处理软件。本教程很实用,对ps学习者很有帮助。 将一张一寸照片8版和印刷的关键是扩大对背景层复制捷径画布大小拖动复制图层是按住Ctrl + Alt拖动鼠标…

添加文字和树木3DMAX渲染PS

添加文字和树木3DMAX渲染PS

文字,树木,电脑软件,DMAX,PS,本教程是教你如何使用PS添加人物和树木3DMAX渲染。这个教程相当不错。推荐它并不难。对于那些使用这两种软件的朋友,你可以来学习。 下面给大家带来PS添加人物和树教程3DMAX渲染,教程比较基础,但是很实用,推荐,一起…

Javascript获取浏览器版本

Javascript获取浏览器版本

浏览器版本,电脑软件,Javascript,通过js获取当前浏览器的名称和版本号需要工作,有很多的网上信息的关键词是navigator.appname,但这种方法获取浏览器的名字只有两或IE或netscap,它可以用来确定是否IE的使用,但我想得到特定的浏览器产品名称如Fi…

PHP可以用于面包屑导航的迭代中,从

PHP可以用于面包屑导航的迭代中,从

导航,用于,迭代,方法,面包屑,在本文中,PHP实例中可以使用面包屑导航迭代找到一个家庭树。分享给你供你参考。具体实现的方法如下: ; 区域=数组( 阵列('id' = > 1,区域= >北京,'pid= > 0), 阵列('id' = > 2,区域= > 'guangxi ','pid= > 0), 阵列(…

PHP是接收相同但不同的值形式数据

PHP是接收相同但不同的值形式数据

数据,多个,实例,形式,名称,最近,当一个查询的信息管理系统是一个问题,信息接收的形式,有很多的输入框中的值相同的名字,盒子是由具有不同价值的用户填充,现在要迁移到PHP平台,并不能改变任何形式的前景(因为使用这种形式的网站太多,所以我们必须考…

在ThinkPHP实例化模型浅析

在ThinkPHP实例化模型浅析

模型,实例化,电脑软件,ThinkPHP,ThinkPHP实例化模型为我们提供了三种方法 第一个比较常用。 用户=新模型(用户); 第二个问题是我们是否有公共模式。 这就是我们使用它的方式。 例如,我们建立了新的模型commonmodel.class.php公共模型 我…

教你如何快速构思想法(方法和技巧)

教你如何快速构思想法(方法和技巧)

方法,构思,教你如何,想法,快速,本文的设计学习者介绍了一些快速构思的方法和技巧。本教程非常实用,对初学者的设计朋友很有帮助,文章的作者是ping PNG,谢谢分享,谢谢大家分享,希望能对您有所帮助。 今天萧边推荐一个教程给你,主要向你介绍如何快…

手绘位图裁剪工具使用图形课程。

手绘位图裁剪工具使用图形课程。

图形,位图,工具使用,手绘,课程,本教程将介绍徒手位图裁剪工具的使用。通过介绍一个示例,希望您能理解并使用位图裁剪工具。 本教程是介绍徒手位图裁剪工具的使用,通过一个实例,希望大家能理解并熟练使用位图裁剪工具。 前言 适合freehand8及…