jquery判断滚动条是否到底部,js判断滚动条是否到底部

http://www.itjxue.com  2023-01-22 01:52  来源:未知  点击次数: 

js window.scroll 怎么判断滚动到底部

若要想判断js window.scroll是否滚动到底部,需要用的三个属性值,它们分别是:

scrollTop、clientHeight和scrollHeight;

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

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

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

so,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

jQuery(JS)怎么判断滚动条快到底部了就触发函数

先上原理图:

判断滚动条是否到临近页面底部,关键是求得上图中 ? 的数值,明显看出这个值 = 文档总高度 - 已滚动部分的高度 - 当前视口高度,所以有如下代码:

var?minAwayBtm?=?100;??//?距离页面底部的最小距离

$(window).scroll(function()?{

????????var?awayBtm?=?$(document).height()?-?$(window).scrollTop()?-?$(window).height();

????console.log('当前距离页面底部:'?+?awayBtm?+?'px');

????if?(awayBtm?=?minAwayBtm)?{

????????console.log('触发了');

????}

});

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

首先理解三个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

如上。

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

[javascript] view plain copy

在CODE上查看代码片派生到我的代码片

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时,加载新内容

// 这里加载数据..

}

});

}

jquery 滚动条到底部执行方法问题.

给你个思路:

1、获取滚动事件;

2、判断隐藏掉的第一个tr与它所在的索引;

3、计算第一个隐藏的tr离窗口顶部的距离;

4、当计算到的距离小于某个值(PS:此值自定义)时显示此隐藏tr及其后的另外两个tr

具体实现:

$(function(){

$("table tr:gt(2)").hide();

$(window).scroll(function(){

var firstHideTr = $("tr:hidden:first"); //隐藏掉的表格第一行

var index = $("table tr").index(firstHideTr); //判断隐藏掉的表格第一行所在的索引值

if(firstHideTr.length0 ((firstHideTr.prev("tr").offset().top-$(window).scrollTop())300)){//此值300为自定义,根据实际情况而定

for(var i=0;i3;i++){//3为滚动时显示的行数,可根据实际去定义

$("table tr").eq(index+i).show()

}

}

});

});

如何用jQuery判断div滚动到底部

判断DIV是否滚动到底部代码如下:

!DOCTYPE html

html

head

script src=""/script

script language="javascript"

$(document).ready(function (){

var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)

var nScrollTop = 0; //滚动到的当前位置

var nDivHight = $("#div1").height();

$("#div1").scroll(function(){

nScrollHight = $(this)[0].scrollHeight;

nScrollTop = $(this)[0].scrollTop;

if(nScrollTop + nDivHight = nScrollHight)

alert("滚动条到底部了");

});

});

/script

div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;"

div style="height:750px;"

/div

/div

/body

/html

jquery怎么判断滚动条的位置

判断滚动条距离顶部的像素:$('body').scrollTop();

//判断一次

alert($('body').scrollTop());

//在滚动时判断(实时判断)

$('body').on('scroll',function(){

????console.log($(this).scrollTop());//输出到控制台

})

(责任编辑:IT教学网)

更多

推荐微信营销文章