监听是否到达页面滑动的可视区域最底部

最新推荐文章于 2023-08-10 16:36:34 发布

weixin_30429201

最新推荐文章于 2023-08-10 16:36:34 发布

阅读量525

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Salicejy/p/10839536.html

本文介绍了如何使用JavaScript获取网页的滚动位置、总高度及浏览器视口高度，并通过监听滚动事件实现特定功能，如判断页面是否滚动到底部。

 1 function getScrollTop(){
 2                 var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
 3                 if(document.body){
 4             　　　　bodyScrollTop = document.body.scrollTop;
 5             　　}
 6             　　if(document.documentElement){
 7             　　　　documentScrollTop = document.documentElement.scrollTop;
 8             　　}
 9             　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
10             　　return scrollTop;
11             }
12             //文档的总高度
13             function getScrollHeight(){
14                 var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
15                 if(document.body){
16             　　　　bodyScrollHeight = document.body.scrollHeight;
17             　　}
18             　　if(document.documentElement){
19             　　　　documentScrollHeight = document.documentElement.scrollHeight;
20             　　}
21             　　scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
22             　　return scrollHeight;
23             }
24             //浏览器视口的高度
25             function getWindowHeight(){
26                 var windowHeight = 0;
27             　　if(document.compatMode == "CSS1Compat"){
28             　　　　windowHeight = document.documentElement.clientHeight;
29             　　}else{
30             　　　　windowHeight = document.body.clientHeight;
31             　　}
32             　　return windowHeight;
33             }
34             //监听滚动条的事件内容
35             window.onscroll = function(){
36             　　if(getScrollTop() + getWindowHeight() == getScrollHeight()){
37                     console.log("getScrollTop:"+getScrollTop()+"**getWindowHeight:"+getWindowHeight()+"**getScrollHeight:"+getScrollHeight())
38             　　}
39             };