由一个瀑布流导出对滚动条滚动距离,可视区尺寸,元素尺寸的内容的知识点

下面是在实现瀑布流中的一小段代码(当滚动条滚动距离+可视区高度>文档高度,请求数据)

 window.onscroll = function () {
        var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;//滚动条纵轴滚动距离
        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;//可视区高度
        var pageHeight = oLi[getMinList(oLi)].offsetHeight;//元素高度(文档高度)
        if(scrollHeight + clientHeight > pageHeight) {
            getData();//获取ajax数据
        }
    }

下面复习一下知识点:

一、查看滚动条的滚动距离

js中有两套方法可以查看滚动条的滚动距离 

(1)window.pageXOffset/window.pageYOffset 查看滚动条横轴和纵轴的滚动距离;但IE8以及以下的版本不兼容

(2)针对IE,有了第二种方法:

document.body.scrollLeft/doucment.body.scrollTop
document.documentElement.scrollLeft/document.documentElement.scrollTop

虽然IE可以使用这两个方法,但是这两个方法不仅仅是IE才可以使用。
这里要说明的是,这两种方法要一起使用,因为浏览器的兼容性问题,有的浏览器是document.body有值,有的是document.documentElement有值,但是所有的浏览器都只有一个有值,不会两个都有或者一个都没有,而且这里的没有值不代表是null,而是0,因此我们使用的时候一般都是两个一起使用。
针对兼容性的问题,我们现在就可以封装一个函数,求滚动条滚动距离的方法

function getScrollOffset(){
      if(window.pageXOffset) {
            return {
                  x: window.pageXOffset,
                  y: window.pageYOffset
            }
      }
      return {
            y: document.body.scollTop + document.documentElement.scrollTop,
            x: document.body.scrollLeft + document.documentElement.scrollLeft;
}

 当浏览器不是IE的时候,可以直接使用window.pageXOffset和window.pageYOffset的方法,当没有这两个的时候,我们才需要来计算。

 二、查看视口的尺寸

注:视口就是我们的可视区,因为我们改变浏览器的大小的时候会改变可视区的大小

有两种方法查看视口尺寸

(1)window.innerHeight/window.innerWidth;这个方法可以直接获取到当前可视区的宽高,但是依然很遗憾的是IE8以及以下的版本不兼容。

(2)这个时候就需要第二套方法了:  
  在标准模式下,doucment.documentElement.clientWidth/document.documentElement.clientHeight  在任何浏览器都兼容。  

  在怪异模式(混杂模式)下,document.body.clientWidth/document.body.clientHeight才能查看视口大小,而不能使用上面标准模式下的方法。

• 什么是怪异模式和标准模式呢?
浏览器的渲染模式有两种:标准模式和怪异模式。我们常用的是标准模式,怪异模式是防止浏览器升级版本过高对后面版本你的代码不兼容,让浏览器可以向后兼容其他低版本的代码的法规则,比如IE6的怪异模式下可以兼容IE5个IE4的语法。
• 我们如何变成怪异模式呢?
其实很简单,只需要把我们html代码的第一行的<!DOCTYPE HTML>去掉就可以变成怪异模式了,而加上这一行代码就可以变成标准模式。

• 如何判断怪异模式还是标准模式?
document上中有一个方法叫做compatMode,当浏览器处于怪异模式的时候会返回字符串“BackCompat”,在标准模式下可以返回“CSS1Compat”,通过这个方法我们就可以判断了。
知道了什么是标准模式和怪异模式以及如何判断的情况下,我们就可以封装一个兼容性的函数,返回浏览器的视口大小。

  function getViewportOffset () {
      if(window.innerWidth) {
            return {
                  w: window.innerWidth,
                  h: window.innerHeight
            }
      }
      if(document.compatMode == 'CSS1Compat') {
            return {
                  w: document.documentElement.clientWidth,
                  h: document.documentElement.clientHeight
      }else {
            return {
                  w: document.body.clientWidth,
                  h: document.body.clientHeight
            }
      }
}  

三、查看元素尺寸

(1)dom.getBoundingClientRect()
在获取的dom元素上,有一个getBoundingClientRect方法,这个方法可以获取到元素的宽高和左上点的位置以及有下点的位置(width、height、top、left、right、bottom),注意这里的宽高是指除去了margin的盒子模型的宽高。
但是老版本的IE浏览器没有实现width和height,那么我们在老版本的IE计算宽高的时候就需要用bottom-top和right-left来计算宽高值了。
还有一点需要注意的是,这里的宽高也不是实时更新的,数据只是一个副本。
我们依然可以封装一个函数,可以返回元素的宽高。

Element.getElementOffset() {
      var objData = this.getBoundingClientRect();
      if(objData.width) {
            return {
                  w: objData.width,
                  h: objData.height
            }
      }else {
            return {
                  w: objData.right - objData.left,
                  h: objData.bottom - objData.top
            }
      }
}

(2)domEle.offsetWidth/dom.offsetHeight
虽然前面有一个ele.getBoundingClientRect()方法,但是由于这个方法名字是在太长了,因此用的并不是非常多,相比较而言,这两个dom元素的属性用的更多一些。
这里获取的宽高值和上面的一样,都是除去margin后的盒子模型的宽高

四、查看元素的位置

dom.offsetLeft/dom.offsetTop这两个值分别是元素距离左侧和上侧的距离,这里的值是相对于有定位的父级而言的,如果没有有定位的父级的话,才是相对于文档的坐标。

那么现在就来了一个问题:如何找到有定位的父级呢?
domEle上面还有一个属性是offsetParent,这个属性可以查看到元素的有定位的父级,如果没有的话就会返回body,而body的offsetParent则是null。
我们利用上面的信息,可以来封装一个函数,求元素的相对于文档的坐标。

Element.prototype.getPosition = function (){
      if (!this.offsetParent){
            return {
                  "w": this.offsetLeft,
                  "h": this.offsetTop
            }
      }
      var width = this.offsetLeft,
            height = this.offsetTop,
            ele = this.offsetParent;
      while (ele.offsetParent){
            width += this.offsetParent.offsetLeft;
            height += this.offsetParent.offsetTop;
            ele = ele.offsetParent;
      }
      return {
            "w": width,
            "h": height
      }
}

 

五、滚动条滚动
让滚动条滚动的方法有三个:scroll、scrollTo、scrollBy;这三个方法都有两个参数,分别是x值和y值。

前两个方法的作用一模一样,都是让滚动条滚动到(x,y)的位置,但是最后一个scrollBy有一些区别,它是让滚动条相对于上一个位置滚动多少距离。
我们可以简单的用这个方法来实现一个自动阅读的功能:
setInterval(function () {
scrollBy(0, 10);
},50);

 根据上面的总结,可以将一开始的代码段完善:

    function getScrollOffset(){
        if(window.pageXOffset){           
            return{
                x:window.pageXOffset,
                y:window.pageYOffset
            }
        }
        return {
            x:document.documentElement.scrollLeft||document.body.scrollLeft,
            y:document.documentElement.scrollTop||document.body.scrollTop
            
        }
    }
    function getClient (){
        if(window.innerHeight){
            return{
                w:window.innerWidth,
                h:window.innerHeight
            }
        }
        //标准模式
        if(document.compatMode=='CSS1Compat'){
            return{
                w:document.documentElement.clientWidth,
                h:document.documentElement.clientHeight
            }
        }
        else{
            return{
                w:document.body.clientWidth,
                h:document.body.clientHeight
            }
        }
    }

    window.onscroll = function () {
        var scrollHeight = getScrollOffset().y//滚动条纵轴滚动距离
        var clientHeight = getClient().h//可视区高度
        var pageHeight = oLi[getMinList(oLi)].offsetHeight;//元素高度(文档高度)
        if(scrollHeight + clientHeight > pageHeight) {
            getData();//获取ajax数据
        }
    }
View Code

 

posted @ 2018-09-15 21:47 freefy 阅读(...) 评论(...) 编辑 收藏