最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery实现判断滚动条滚动到document底部的教程
时间:2022-06-25 15:22:39 编辑:袖梨 来源:一聚教程网
本文实例讲述了jQuery实现判断滚动条滚动到document底部的方法。分享给大家供大家参考,具体如下:
滚动条没有实际的高度。只是为了呈现效果才在外型上面有长度。
在js当中也没有提供滚动条的高度API。
参考了网上有关资料:判断滚动条到底部的基本逻辑是滚动条滚动的高度加上视口的高度,正好是document的高度,公式表示为
滚动条滚动的高度+浏览器视口的高度>=document的高度。
参考网上资料,具体代码如下:
//滚动条在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 scroll, bodyScroll, documentScroll; //兼容谷歌 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 window; windowHeight = document.documentElement.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"); } });
代码测试有效果。
相关文章
- 《无限暖暖》天星之羽获得位置介绍 12-20
- 《流放之路2》重铸台解锁方法介绍 12-20
- 《无限暖暖》瞄准那个亮亮的成就怎么做 12-20
- 《无限暖暖》魔气怪终结者完成方法 12-20
- 《无限暖暖》曙光毛团获得位置介绍 12-20
- 《无限暖暖》日光果获得位置介绍 12-20