当前位置: 首页 > 网络技术

js滚动到底部,如何用JS判断滚动条拉到了最底部

 时间:2020-04-30 09:46:21 来源: 

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

首先理解三个dom元素,分别是:clientHeight、offsetHeight、scrollTop。clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。offsetHeight:是指元素内容的高度。依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分。scrollTop:这个是什么呢?他可以理解为滚动条可以滚动的长度。举例,如果一个DIV高度是400px(即clientHeight为400),而里面的内容是一个很长的列表,内容的高度是1000px(即offsetHeight为1000)。那么,可见部分我们看到400px,1000px的内容中还有600px不可见。而这不可见的部分呢,正是我们通过拉动滚动条才能把这一部分显示出来。你如果滚动条不拉动,此时scrollTop为0,如果你把滚动条拉到e799bee5baa631333365656639底,显示出列表最下面的部分,此时,scrollTop为600。所以scrollTop的取值区间为[0, 600]。所以这个600可以理解为滚动条可以滚动的长度。理解完上面的这个概念之后。要判断是否滚动到底部就很好做了。首先,我们拉动滚动条,从最上面拉到最下面,变化的是scrollTop的值,而这个值是有一个区间的。这个区间是:[0, (offsetHeight - clientHeight)]即,滚动条拉动的整个过程的变化在 0 到 (offsetHeight – clientHeight) 范围之内。1、判断滚动条滚动到最底端:scrollTop == (offsetHeight – clientHeight)2、在滚动条距离底端50px以内:(offsetHeight – clientHeight) – scrollTop <= 503、在滚动条距离底端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判断div滚动到底部

判断DIV是否滚动到底部代码如下:<!7a686964616f31333365666233DOCTYPE html><html><head><script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></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>

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

若要想判断复js window.scroll是否滚动到底部,需要用的三个属性值,它们分别是:scrollTop、clientHeight和scrollHeight;1、scrollTop为滚动条在Y轴上的滚动距离。2、clientHeight为内容可视区制域的高度。3、scrollHeight为内容可视区域的高度加上溢出(滚动)的zhidao距离。so,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

js点击按钮控制滚动条缓慢移动到底部

修改完成了e799bee5baa6e997aee7ad9431333337373562 你把 你的js全部替换下即可<scripttype="text/javascript">varcurrentPosition,timer;functionGoTop(){currentPosition=document.documentElement.scrollTop;currentPosition-=50;if(currentPosition>0){window.scrollTo(0,currentPosition);timer=setInterval("GoTop()",10);}else{currentPosition=0;window.scrollTo(0);window.clearInterval(timer);}}varcurrentPosition2,timer2;functionGoBottom(){currentPosition2=document.documentElement.scrollTop;currentPosition2+=50;if(currentPosition2<=1000){window.scrollTo(0,currentPosition2);timer2=setInterval("GoBottom()",100);}else{currentPosition=1000;window.scrollTo(0,1000);window.clearInterval(timer2);}}</script>

js如何监听屏幕滚动到底了

利用scroll 事件来监听。当用户滚动指定的元素时,会发生 scroll 事件。scroll 事件适用于所copy有可滚动的元素和 window 对象(浏览器窗口)zhidao。scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数。