原生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" ----向后兼容模式,删掉这句就变成此模式