判断滚动条到底部的JS代码
程序员文章站
2023-11-11 19:36:22
判断滚动条到底部,需要用到dom的三个属性值,即scrolltop、clientheight、scrollheight。
scrolltop为滚动条在y轴上的滚动距离。
cli...
判断滚动条到底部,需要用到dom的三个属性值,即scrolltop、clientheight、scrollheight。
scrolltop为滚动条在y轴上的滚动距离。
clientheight为内容可视区域的高度。
scrollheight为内容可视区域的高度加上溢出(滚动)的距离。
滚动条到底部的条件即为scrolltop + clientheight == scrollheight
//滚动条在y轴上的滚动距离 function getscrolltop(){ var scrolltop = 0, bodyscrolltop = 0, documentscrolltop = 0; if(document.body){ bodyscrolltop = document.body.scrolltop; } if(document.documentelement){ documentscrolltop = document.documentelement.scrolltop; } scrolltop = (bodyscrolltop - documentscrolltop > 0) ? bodyscrolltop : documentscrolltop; return scrolltop; } //文档的总高度 function getscrollheight(){ var scrollheight = 0, bodyscrollheight = 0, documentscrollheight = 0; if(document.body){ bodyscrollheight = document.body.scrollheight; } if(document.documentelement){ documentscrollheight = document.documentelement.scrollheight; } scrollheight = (bodyscrollheight - documentscrollheight > 0) ? bodyscrollheight : documentscrollheight; return scrollheight; } //浏览器视口的高度 function getwindowheight(){ var windowheight = 0; if(document.compatmode == "css1compat"){ windowheight = document.documentelement.clientheight; }else{ windowheight = document.body.clientheight; } return windowheight; } window.onscroll = function(){ if(getscrolltop() + getwindowheight() == getscrollheight()){ alert("you are in the bottom!"); } };
jquery
$(window).scroll(function(){ var scrolltop = $(this).scrolltop(); var scrollheight = $(document).height(); var windowheight = $(this).height(); if(scrolltop + windowheight == scrollheight){ alert("you are in the bottom"); } });
上一篇: js创建对象的5种基本方式(实例)