1.查看滚动条的滚动距离**

  1. 第一种：IE8及IE8以下不兼容（IE9部分兼容）IE9以上能用

1.window.pageXOffset -- 横向滚动距离

2.window.pageYOffset -- 纵向滚动距离

当屏幕的长度超过了首屏，我们往下拉的时候，拉了多少像素，使用window.pageYOffset就可以知道往下滚动了多少像素

例：问：滚动条往下移动了400px，求浏览器最顶端到滚动条滚动的位置的像素？

答：400px+首屏像素（此时这个屏幕的底端距离整个网页的最顶端也是这样算）

  1. IE8及IE8以下的使用方法

第一种：

1.document.body.scrollLeft --横向滚动距离

  1. document.body.scrollTop --纵向滚动距离

第二种：

1.document.documentElement.scrollLeft --横向滚动距离

2.document.documentElement.scrollTop --纵向滚动距离

注意：上面两种兼容性比较混乱，其中一个有值，另外一个的值一定是0，这两个最好的用法是取两个值相加，因为不可能存在两个相同的值。如：document.body.scrollLeft + document.documentElement.scrollLeft

应用：封装兼容性方法（哪个浏览器都好使），求滚动条滚动距离getScrollOffset()

Offset是尺寸的意思(可以封装一个代码库,放在js文件里,以后要用直接调用即可)

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

2. 查看视口的属性

视口(可视区窗口就是编写的html文档可以看到的部分，不含菜单栏、地址栏、控制台)。

第一种:IE8及IE8以下不兼容 w3c标准的方法

1.window.innerWidth --可视区域的宽(加上滚动条宽度 / 宽度)

  1. window.innerHeight --可视区域的高(加上滚动条宽度 / 宽度)

如果窗口放大页面了，页面的尺寸也会拉伸，尺寸就会变小

第二种:标准模式下，任何浏览器都兼容 client是客户端的意思

1.document.documentElement.clientWidth

2.document.documentElement.clientHeight

第三种:适用于怪异模式(又叫混杂模式)下的浏览器

1.document.body.clientWidth

2.document.body.clientHeigth

标准模式和怪异模式

1.标准模式：<!DOCTYPE html> 是html5的

2.怪异/混杂模式：试图去兼容之前的语法，去掉<!DOCTYPE html> 这一行即开启(向后兼容)

document.compatMode 是用于判断是怪异模式还是标准模式的。

例: 在控制台输入document.compatMode回车 如果返回 CSS1compat 就是标准模式；返回 BackCompat 就是怪异模式

文章目录