查看滚动条的距离
| 方法 | 版本 |
|---|---|
| window.pageXOffset / pageYOffset | IE9/IE8及以下不支持(常规) |
| document.body.scrollLeft/scrollTop | IE9/IE8及以下(部分支持，具体看模式) |
| document.documentElement.scrollLeft/scrollTop | IE9/IE8及以下(部分支持，具体看模式) |
| window.scrollX / scrollY | 不常见 |
- 滚动条距离：也看页面真实移动了多少，不要看物理距离
兼容模式
浏览器的怪异模式和标准模式
- 意味着需要按照W3C规范
CSS1Compat- W3C的兼容模式：标准模式
<!DOCTYPE html>
- 若删除
<!DOCTYPE html>则为BackCompat- 怪异模式
浏览器的可视区域
| 方法 | 模式 |
|---|---|
| window.innerWidth / innerHeight | IE9/IE8及以下不支持(常规)【包括滚动条】 |
| document.documentElement.clientWidth / clientHeight | IE9/IE8及以下 - 标准 【不包括滚动条】 |
| document.body.clientWidth / clientHeight | IE9/IE8及以下 - 怪异 【包括滚动条】 |
outerWidth / outerHeight（包含了滚动条、侧边栏、控制台等）
文档尺寸
scrollWidth = window.innerWidth + window.pageXOffset是真正html文档的宽高
| 方法 | 模式 |
|---|---|
| document.documentElement.scrollWidth /scrollHeight | IE9/IE8及以下 - 标准 【不包括滚动条】 |
| document.body.scrollWidth / scrollHeight | IE9/IE8及以下 - 怪异 【包括滚动条】 |
div.getBoundingClientRect()
- 在IE中不返回宽高，可以用
bottom-top计算 - 不实时计算
offsetLeft
- 只认父级的定位元素，没有则向上找到可视区域的边框
- margin塌陷
- 解决1，父元素加上边距
- 解决2，BFC 但是offsetLeft仍然是100
offsetParent
- 找有定位的父级
- 没有则找到body
封装方法
- 小盒子（左上角）距离文档左上角的坐标
document.body.offsetLeft0
操作滚动条
- 要滚动到
window.scroll(x,y)/window.scrollTo(x,y) - 每一次滚动多少
window.scrollBy(x,y)应用：计时器+每次滚动（自动滚动）
