zoukankan      html  css  js  c++  java
  • JS如何判断滚动条是否滚到底部

    首先说一下常识:

    网页可见区域宽: document.body.clientWidth; 
    网页可见区域高: document.body.clientHeight; 
    
    网页可见区域宽: document.body.offsetWidth   (包括边线的宽); 
    网页可见区域高: document.body.offsetHeight  (包括边线的宽); 
    
    网页正文全文宽: document.body.scrollWidth; 
    网页正文全文高: document.body.scrollHeight; 
    
    网页被卷去的高: document.body.scrollTop; 
    网页被卷去的左: document.body.scrollLeft; 
    
    网页正文部分上: window.screenTop; 
    网页正文部分左: window.screenLeft; 
    
    屏幕分辨率的高: window.screen.height; 
    屏幕分辨率的宽: window.screen.width; 
    
    屏幕可用工作区高度: window.screen.availHeight; 
    屏幕可用工作区宽度:window.screen.availWidth;
    

    关于offset共有5个东西需要弄清楚:
      1. offsetParent
      2. offsetTop
      3. offsetLeft
      4. offsetWidth
      5. offsetHeight

    offsetWidth与offsetHeight

    也就是元素的可视宽度,这个宽度包括元素的边框(border),水平padding,垂直滚动条宽度,元素本身宽度等

    offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)。
    offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)
    

    offsetLeft与offsetTop

    返回对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量。从这个定义中我们可以明确地知道offsetLeft与当前元素的margin-left和offsetParent的padding-left有关

    offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)。
    offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)
    

    offsetParent

    1. 如果当前元素的父级元素没有进行CSS定位(position为absolute或relative),offsetParent为body。
    2. 如果当前元素的父级元素中有CSS定位(position为absolute或relative),offsetParent取最近的那个父级元素。

    滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

    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 scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
      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 windowHeight = 0;
      if(document.compatMode == "CSS1Compat"){
        windowHeight = document.documentElement.clientHeight;
      }else{
        windowHeight = document.body.clientHeight;
      }
      return windowHeight;
    }
    window.onscroll = function(){
      if(getScrollTop() + getWindowHeight() == getScrollHeight()){
        alert("已经到最底部了!!");
      }
    };
    
    //jquery
    $(window).scroll(function(){
      var scrollTop = $(this).scrollTop();
      var scrollHeight = $(document).height();
      var windowHeight = $(this).height();
      if(scrollTop + windowHeight == scrollHeight){
        alert("已经到最底部了!");
      }
    });
    
  • 相关阅读:
    1058 A+B in Hogwarts (20)
    1036. Boys vs Girls (25)
    1035 Password (20)
    1027 Colors in Mars (20)
    1009. Product of Polynomials (25)
    1006. Sign In and Sign Out
    1005 Spell It Right (20)
    1046 Shortest Distance (20)
    ViewPager页面滑动,滑动到最后一页,再往后滑动则执行一个事件
    IIS7.0上传文件限制的解决方法
  • 原文地址:https://www.cnblogs.com/yangwang12345/p/7798084.html
Copyright © 2011-2022 走看看