网络编程 
首页 > 网络编程 > 浏览文章

jQuery实现判断滚动条到底部

(编辑:jimmy 日期: 2025/7/3 浏览:3 次 )

判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。

scrollTop为滚动条在Y轴上的滚动距离。

clientHeight为内容可视区域的高度。

scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。

从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

废话不多少说,赶紧上代码(兼容不同的浏览器)。

lazyload.js

"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!");
  }
};

lazyload-jQuery.js

$(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");
  }
});

lazyLoad.html

<!doctype html>
<html lang="en" style="height:900px;">
 <head>
 <meta charset="UTF-8">
 <meta name="Author" content="forever">
 <link rel="stylesheet" href="css/lazyload.css" />
 <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.7.2.min.js">

以上所述就是本文的全部内容了,希望大家能够喜欢。

上一篇:Windows系统下Node.js的简单入门教程
下一篇:jQuery实现新消息在网页标题闪烁提示
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。