js滚动事件scroll家族

最新推荐文章于 2022-06-28 21:56:15 发布

约德尔蒙

最新推荐文章于 2022-06-28 21:56:15 发布

阅读量548

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/gyq04551/article/details/53242541

版权

Js 专栏收录该内容

64 篇文章 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>

约德尔蒙

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js滚动事件scroll家族

Title//-----------------------滚动事件------------------ //基本语法 window.onscroll = function () { console.log(1); }//---------------------scrollWid
复制链接

扫一扫