js滚动事件scroll家族

一时失言乱红尘 2022-07-13 23:27 210阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
    //-----------------------滚动事件------------------
                //基本语法
                window.onscroll = function () {
                    console.log(1);
                }
    
    
    //---------------------scrollWidth和scrollHeight-------
    
                var div = document.getElementsByTagName("div")[0];
                //scrollWidth和scrollHeight不包括border和margin
                //scrollWidth = width + padding;
                // 不包括 border和margin;
    
                //高度有一个特点：如果文字超出了盒子，高度为超出盒子的内容的高。不超出是盒子本身高度
                //IE8以下，不包括IE8为盒子本身内容的多少。
                console.log(div.scrollWidth);
                console.log(div.scrollHeight);
    
    
    //--------------------scrollLeft和scrollTop-----------
                window.onscroll = function () {
                //        console.log(document.body.scrollTop);
                    //document.body.scrollTop：网页被卷去的头部
                    //兼容有问题
                    document.title = document.body.scrollTop + "   "+document.body.scrollLeft;
    
                }
    
                //兼容写法
                window.onscroll = function () {
                    //没有dtd约束的
                //        document.title = document.body.scrollTop;
                    //有dtd约束的
                //        document.title = document.documentElement.scrollTop;
    
                    //兼容写法
                //        document.title = document.body.scrollTop || document.documentElement.scrollTop;
                //        document.title = document.body.scrollTop + document.documentElement.scrollTop;
                //            document.title = window.pageYOffset;
                //        alert(window.pageYOffset);
                //        document.title = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
    }
    </script>
    </body>
    </html>