设为首页收藏本站
开启辅助访问

在路上

 找回密码
 立即注册
在路上 › 站点首页 ›学习 › 查看内容

判断滚动条到底部的JS代码

2016-12-20 13:17| 发布者: zhangjf| 查看: 388| 评论: 0

摘要: lazyload.js ?//滚动条在Y轴上的滚动距离 function getScrollTop(){　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;　　if(document.body){　　　　bodyScrollTop = document.body. ...
lazyload.js
  1. ?
  2. //滚动条在Y轴上的滚动距离
  3. function getScrollTop(){
  4. 　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
  5. 　　if(document.body){
  6. 　　　　bodyScrollTop = document.body.scrollTop;
  7. 　　}
  8. 　　if(document.documentElement){
  9. 　　　　documentScrollTop = document.documentElement.scrollTop;
  10. 　　}
  11. 　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
  12. 　　return scrollTop;
  13. }
  14. //文档的总高度
  15. function getScrollHeight(){
  16. 　　var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
  17. 　　if(document.body){
  18. 　　　　bodyScrollHeight = document.body.scrollHeight;
  19. 　　}
  20. 　　if(document.documentElement){
  21. 　　　　documentScrollHeight = document.documentElement.scrollHeight;
  22. 　　}
  23. 　　scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
  24. 　　return scrollHeight;
  25. }
  26. //浏览器视口的高度
  27. function getWindowHeight(){
  28. 　　var windowHeight = 0;
  29. 　　if(document.compatMode == "CSS1Compat"){
  30. 　　　　windowHeight = document.documentElement.clientHeight;
  31. 　　}else{
  32. 　　　　windowHeight = document.body.clientHeight;
  33. 　　}
  34. 　　return windowHeight;
  35. }
  36. window.onscroll = function(){
  37. 　　if(getScrollTop() + getWindowHeight() == getScrollHeight()){
  38. 　　　　alert("you are in the bottom!");
  39. 　　}
  40. };
复制代码
lazyload-jQuery.js
  1. $(window).scroll(function(){
  2. 　　var scrollTop = $(this).scrollTop();
  3. 　　var scrollHeight = $(document).height();
  4. 　　var windowHeight = $(this).height();
  5. 　　if(scrollTop + windowHeight == scrollHeight){
  6. 　　　　alert("you are in the bottom");
  7. 　　}
  8. });
复制代码
[文件] lazyLoad.html
  1. <!doctype html>
  2. <html lang="en" style="height:900px;">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="Author" content="forever">
  6. <link rel="stylesheet" href="css/lazyload.css" />
  7. <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  8. <title>lazyLoad</title>
  9. <script type="text/javascript">
  11. $(function(){
  12. var $ul=$("#lazyLoadWrap").find("ul");
  13. $(window).scroll(function(){
  14. 　 　var scrollTop = $(this).scrollTop();
  15. 　 　var scrollHeight = $(document).height();
  16. 　 　var windowHeight = $(this).height();
  17. 　　 if(scrollTop + windowHeight == scrollHeight){
  18. for(var i=0;i<6;i++){
  19. $ul.append("<li>Hello</li>");
  20. }
  21. 　　 }
  22. });
  23. });
  24. </script>
  25. </head>
  26. <body>
  27. <div id="lazyLoadWrap">
  28. <ul>
  29. <li></li>
  30. <li></li>
  31. <li></li>
  32. <li></li>
  33. <li></li>
  34. <li></li>
  35. <li></li>
  36. <li></li>
  37. <li></li>
  38. <li></li>
  39. <li></li>
  40. <li>12</li>
  41. </ul>
  42. </div>
  43. </body>
  44. </html>
复制代码
收藏 邀请
上一篇：基于JAVA的违章查询助手数据调用代码实例下一篇：Eric Raymond对于几大开发语言的评价

最新评论

相关分类

小黑屋|在路上 ( 蜀ICP备15035742号-1 )  

;

GMT+8, 2025-7-8 14:32

Copyright 2015-2025 djqfx

返回顶部