zoukankan      html  css  js  c++  java
  • 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、78 只认(document.documentElement有没有dtd都可以)
     IE9+任何时候
             document.title = document.documentElement.scrollTop;(文档在动)
    
            //不管有没有 dtd  兼容 火狐 、 谷歌 、IE9+以上的 不兼容IE678
            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>
     
     
  • 相关阅读:
    JVM如何执行方法调用
    JVM如何实现反射
    JVM是如何处理异常的
    Java类加载
    windows-Kafka安装
    Google Eventbus简单使用
    队列c#版
    python 元类

    Spring Mvc 笔记二之异常和文件上传
  • 原文地址:https://www.cnblogs.com/wdz1/p/7695836.html
Copyright © 2011-2022 走看看