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 就是怪异模式