js scroll动画

知识点

1、window.scrollTo （x,y）:可以把内容滚动到指定位置

 scroll

 scroll：卷动意思（书卷）  从上到下移动

 

1、window.onscroll 窗口滚动事件（必须有滚动条才可以触发）

  body{height: 5000px;}
  window.onscroll=function () {
        console.log(0)
    }

2、scrollWidth 获取盒子的高

     scrollWidth =盒子宽+内边距（不包括外边距 ， 边框）

var div=document.getElementsByTagName("div")[0];
    console.log(div.scrollWidth);

3、scrollHeight 高度 （很少用）

      scrollHeight  =盒子高+内边距（不包括外边距 ， 边框）

      如果内容没有溢出盒子，高度就是盒子本身+内边距

      如果溢出，高度就是超出内容的总高度

      ie7（包括ie7）高度就是内容的高度

 

4、scrollTop 窗口滚动的时候，页面被浏览器遮挡的高度 (调用者文档页面)

      scrollLeft  窗口滚动的时候，页面被浏览器遮挡的宽度

  <script>
        window.onscroll=function () {
           // console.log(document.body.scrollTo)
            document.title=document.body.scrollTop;
            document.title=document.body.scrollLeft;
        }
    </script>

 

5、scroll 兼容性

DTD，只有旧版本的浏览器遵循一些新的规则 （html4 有dtd）

<script >
    window.onscroll=function() {
        //没有约束的 dtd 兼容  
谷歌只认（document.body 有没有dtd都可以） IE9+
        document.title=document.body.scrollTop; （认为body在动）

        //有约束的 dtd 兼容 
 IE6、7、8 只认（document.documentElement有没有dtd都可以）
 IE9+任何时候
         document.title = document.documentElement.scrollTop;(文档在动)

        //不管有没有 dtd  兼容 火狐 、 谷歌 、IE9+以上的 不兼容IE6\7\8
        document.title=window.pageYOffset   (窗口的纵坐标在动)
    }
</script>

 

兼容性写法

document.title=document.documentElement.scrollTop || document.body.scrollTop

 

最常用的兼容写法

//最常用的兼容写法
        document.title= window.pageYOffset || 
                        document.documentElement.scrollTop ||
                        document.body.scrollTop;

 

 (1)CSS1Compat 已经声明

    (2)BackCmpat 为声明

<script>
    alert(document.compatMode)
</script>

7、自己分装一个，scroll兼容性写法

<script>
    window.onscroll=function () {
      document.title=scroll().top+"^^^^"+scroll().left
    };    //需求封装一个兼容 scroll的
    //分装当然用函数了
    function scroll(){
        //如果这个window.pageYOffset 存在那么返回值是0-无穷大
        //如果没有这个值，返回值是undefined
        //只要判断不是undefined就可以调用次方法
        if(window.pageYOffset !== undefined){
            var josn={
                     "top":window.pageYOffset,
                     "left":window.pageXOffset
            };
            return josn
        }else if(document.compatMode==="CSS1Compat"){
            //返回一个json数组
            return {
                "top": document.documentElement.scrollTop,
                "left": document.documentElement.scrollLeft
                }
            }else {
            return {
                "top": document.body.scrollTop,
                "left": document.body.scrollLeft
                }
        }
    }
</script>