原生js底层基础（十八）JavaScript 滚动条距离、可视区域宽高、元素尺寸、让滚动条移动

1.获取滚动条距离

• window.pageXOffset ( pageYOffset )(IE8及IE8以下不兼容)

• IE8及IE8以下能兼容的方法
  1.document.body.scrollLeft ( scrollTop )
  2.document.documentElement.scrollLeft (scrollTop )
  两个方法的兼容性比较混乱，但是他们两个互斥，不会两个同时兼容，所以用的时候用两个相加的值就可以了

封装获取滚动条距离的方法（兼容）

function getScrollOffset() {
    if (window.pageXOffset) { //IE9及以上  jquery中 --targt.offset().top
        return {
            x: window.pageXOffset,
            y: window.pageYOffset
        }
    } else { //兼容IE8及IE8以下 
        return {
            x: document.body.scrollLeft + document.documentElement.scrollLeft,
            y: document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}

2.可视区域宽高

即用户肉眼可见的区域的宽高

• window.innerWidth( innerHeight )(IE9及以上才兼容)

• document.documentElement.clientWidth ( clientHeight ) (标准模式下任何浏览器都可以)

• document.body.clientWidth ( clientHeight )(怪异模式下的浏览器)

封装获取可视区宽高的方法（兼容）

function getViewPortOffset() {
    if (window.innerWidth) { //IE9及以上	，条件可以变为0 && window.innerWidth调试
        return {
            x: window.innerWidth,
            Y: window.innerHeight
        }
    } else { //IE8及以下也兼容
        if (document.compatMode == "BackCompat") {
            return { //标准模式
                x: document.body.clientWidth,
                y: document.body.clientHeight
            }
        } else {
            return { //怪异模式
                x: document.documentElement.clientWidth,
                y: document.documentElement.clientHeight
            }
        }
    }
}

3.元素尺寸

• 元素宽高（ 包含padding border ）：element.offsetWidth/offsetHeight

• 元素的top/left：element.offsetTop/offsetLeft
  对于无定位父级的元素，返回的是相对文档的距离，对于有定位父级的元素，返回的是相对于最近的父级的距离的坐标

• 元素父级：ele.offsetParent
  返回最近的有定位的父级,如无，返回body

4.让滚动条滚动

（1）指定滚动条移动至哪个位置（以下两个方法一样，选一即可）

• window.scroll(x,y)
• windowscrollTo(x,y)
  例如window.scroll(0,500), 滚动条定位到坐标0，500的地方

（2）基于当前位置，累加指定距离移动

• scrollBy()
  例如，window.scrollBy(0,10);
  一个最经典的应用便是电子书的自动阅读功能了，以下做简单示例

var start = document.getElementsByClassName('start')[0];
	var stop = document.getElementsByClassName('stop')[0];
	var timer = 0;
	var flag = true;//开关，执行完定时器就把开关锁住，避免多次点击开始按钮加速，当单击停止后，再把锁打开

	start.onclick = function(){
		if(flag){
			timer = setInterval(function(){
				console.log(22)
				window.scrollBy(0,10);
			},100)
			flag = false;
			
		}
	}
	stop.onclick = function(){
		clearInterval(timer)
		flag = true;
	}

6.应用：

1.要完成点击列表展开后再收起时，滚动条回到原来浏览的位置，可以
首先用window.pageX等获取，记录初始动条距离，再用scrollTo设定回之前记录的地方
2.自动阅读器的功能 用scrollBy实现

7.查询浏览器遵循标准

document.compatMode
"CSS1Compat" ----标准模式，一般来说都这个
"BackCompat" ----向后兼容模式,删掉这句就变成此模式