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>