最新下载
热门教程
- 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-30
- 唯品会官网首页-官方旗舰店正品入口 12-30
- 腾讯视频会议app手机版下载-腾讯视频会议平台免费安装 12-30
- 灵妖劫手游什么时候开服 灵妖劫手游开服时间介绍 12-30
- 灵妖劫什么时候公测 灵妖劫公测时间介绍 12-30
- 红色警戒2网页版入口-红色警戒2免下载直接玩 12-30