最新下载
热门教程
- 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"); } });
代码测试有效果。
相关文章
- 无期迷途主线前瞻直播总结 无期迷途主线前瞻直播内容介绍 11-22
- 以下哪种非遗技艺是用针在纸上绣画 蚂蚁新村11月21日答案 11-22
- 江南百景图听风塔怎么样 11-22
- 原神恰斯卡圣遗物怎么搭配 11-22
- 2024年霸王茶姬11月22日口令是什么 2024.11.22霸王茶姬口令介绍 11-22
- 光遇11.21季节蜡烛在哪里 光遇11月21日季节蜡烛位置攻略 11-22