zoukankan      html  css  js  c++  java
  • 窗口滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
    </head>
    <style>
        body{
            height:2000px;
        }
    </style>
    <body>
    
    </body>
    </html>
    <script>
        // window.onscroll=function () {  //页面滚动效果事件
        //     //document.title=document.body.scrollTop;
        //      // document.title=document.documentElement.scrollTop;
        //     //document.title=window.pageYOffset;
        //
        //     //兼容性写法
        //     var scrollTop=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ||0;
        //     console.log(scrollTop);
        // }
    
        //封装自己的scrollTop
        function scroll()
        {
            if(window.pageYOffset!=null)  //浏览器识别pageYOffset
            {
                return{
                    left:window.pageXOffset,
                    top:window.pageYOffset
                }
            }
            else if(document.compatMode == "CSS1Compat"){  //不是怪异模式(没有声明DTD的模式)
                return{
                    left:document.documentElement.scrollLeft,
                    top:document.documentElement.scrollTop
                }
            }
            else{
                return{
                    left:document.body.scrollLeft,
                    top:document.body.scrollTop
                }
            }
        }
    
       window.onscroll=function () {
           console.log(scroll().left);
           console.log(scroll().top);
       }
    
    </script>
    

      

  • 相关阅读:
    java 数组声明方法
    python 什么叫迭代
    Golang生成区间随机整数
    Golang字符串格式化
    Golang中map的三种声明方式和简单实现增删改查
    Golang实现二分查找法
    Golang实现冒泡排序法
    Golang切片的三种简单使用方式及区别
    Golang获取int数组里的最大值和下标
    Golang数组注意细节
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/11252898.html
Copyright © 2011-2022 走看看