1.window.pageXOffset、document.body.scrollLeft

pageXOffset 返回文档在窗口左上角水平的像素。

pageYOffset 返回文档在垂直方向滚动的像素。

封装滚动插件(兼容IE)

  1.     function getScrollOffset(){
  2.         if(window.pageXOffset){
  3.             return{
  4.                 left:window.pageXOffset,
  5.                 top:window.pageYOffset
  6.             }
  7.         }else{
  8.             return{
  9.                 left:document.body.scrollLeft + document.documentElement.scrollLeft,
  10.                 top:document.body.scrollTop + document.documentElement.scrollTop
  11.             }
  12.         }
  13.     }

2.兼容模式

  1. <!DOCTYPE html>

HTML文档头写 <!DOCTYPE html> 则使用W3C规范 标准模式
不写则用浏览器自己的规范 怪异模式

测试方法 document.compatMode

document.compatMode === "CSS1Compat" //W3C 
document.compatMode === "BackCompat" //怪异模式

3.window.innerWidth、document.body.clientWidth、document.documentElement.clientWidth

innerheight 返回窗口的文档显示区的高度。

innerwidth 返回窗口的文档显示区的宽度。

封装可视窗口尺寸

    function getViewportSize(){
        if(window.innerWidth){
            return{
                width:window.innerWidth,
                height:window.innerHeight
            }
        }else{
            if(document.compatMode==='BackCompat'){
                return{
                    width:document.body.clientWidth,
                    height:document.body.clientHeight
                }
            }else{
                return {
                    width:document.documentElement.clientWidth,
                    height:document.documentElement.clientHeight
                }
            }
        }
    }

4.document.body.scrollWidth、document.documentElement.scrollWidth

封装body大小

    function getScrollSize(){
        if(document.body.scrollWidth){
            return {
                width:document.body.scrollWidth,
                height:document.body.scrollHeight
            }
        }else{
            return {
                width:document.documentElement.scrollWidth,
                height:document.documentElement.scrollHeight
            }
        }
    }

5.offsetLeft、offsetTop、offsetParent

封装元素距离上、左边距的距离方法

 <body>
        <div class="grandPa">
        <div class="parent">
            <div class="son"></div>
        </div>
    </div>
</body>
<script>
    var son = document.getElementsByClassName('son')[0];
    function getElemDocPosition(el){
        var parent = el.offsetParent,
            offsetLeft = el.offsetLeft,
            offsetTop = el.offsetTop;
        while(parent){
            offsetLeft += parent.offsetLeft;
            offsetTop += parent.offsetTop;
            parent = parent.offsetParent;
        }
        return {
            left: offsetLeft,
            top: offsetTop
        }
    }
</script>

6.window.scroll()、window.scrollTo()、window.scrollBy()

ie要定位scrollTo 可以直接设置scrollLeft scrollTop

ie不支持参数**

课后作业未做 小说自动滚动