滚动条的滚动距离

window.pageXOffset 横向/pageYOffset 纵向滚动条
IE8 及 IE8 以下不兼容（IE9 部分兼容）IE9 以上能用
滚动条往下滚动了 400px，求浏览器最顶端到滚动条滚动的位置的像素
400px+首屏像素（此时这个屏幕的底端距离整个网页的最顶端也是这样算）
image.png
IE8及以下
1）document.body.scrollLeft/scrollTop——求横向距离和纵向距离
2）document. documentElement.scrollLeft/scrollTop
image.png
上面两个兼容性比较混乱，其中一个有值，另外一个的值一定是 0。这两个最好的用法是取两个值相加，因为不可能存在两个同时有值
如 document.body.scrollLeft + document. documentElement.scrollLeft
image.png

查看视口的尺寸

可视区窗口就是编写的 html 文档可以看到的部分，不含菜单栏、地址栏、控制台
1、window.innerWidth/innerHeight //w3c 标准方法 可视区域的宽高 （加上 滚动条宽度 / 高度）
IE8 及 IE8 以下不兼容
image.png

渲染模式：
1 标准模式：<！DOCTYPE html>是 html5 的（在 emmet 插件下 html:5 就出来了）
2 怪异/混杂模式：试图去兼容之前的语法，去掉<！DOCTYPE html>这一行即可开启（向后兼容）

2、document.documentElement.clientWidth/clientHeight
标准模式下，任意浏览器都兼容 client 是客户端的意思
3、document.body.clientWidth/clientHeight
适用于怪异模式下的浏览器
4、封装兼容性方法，返回浏览器视口尺寸 getViewportOffset()
例 document.compatMode 是用于判断是怪异模式还是标准模式的

image.png

查看元素的几何尺寸

domEle.getBoundingClientRect(); //这是 es5.0 的方法，但是只用了解
//兼容性很好 该方法返回一个对象，对象里面有 left,top,right,bottom 等属性。left 和 top 代表 该元素左上角的 X 和 Y 坐标，right 和 bottom 代表元素右下角的 X 和 Y 坐标
//height 和 width 属性老版本 IE 并未实现，在老版本的 ie 里面，利用右侧边减左侧面解决
//返回的结果并不是“实时的”,只是当前的镜像
image.png

dom.offsetWidth，dom.offsetHeight
//求得值是包括 padding 的
image.png

dom.offsetLeft, dom.offsetTop
//对于无定位父级的元素，返回相对文档的坐标。
//对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。(无论是 left 还是margin-left 等都是距离)

image.png

image.png

dom.offsetParent //返回最近的有定位的父级，如无，返回 body, body.offsetParent 返回 null
image.png

让滚动条滚动

window 上有三个方法 scroll(), scrollTo(),两个功能一样，scrollBy();累加滚动距离
scroll(x，y), scrollTo(x，y),功能是一样的，里面能填两个参数
scroll(x 轴滚动条的距离，y 轴滚动条的距离)，里面的 xy 可以填负数
scrollBy(x，y);是累加滚动距离，填负数就往上滚动

三个方法功能类似，用法都是将 x,y 坐标传入。即实现让滚动轮滚动到当前位置
区别：scrollBy()会在之前的数据基础之上做累加
利用 scrollBy() 快速阅读的功能
image.png

image.png
image.png