当offsetTop、offset().top、scrollTop、scrollTop()遇上zoom的时候

最新推荐文章于 2022-06-27 21:58:50 发布

chiye4241

最新推荐文章于 2022-06-27 21:58:50 发布

阅读量438

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/2984352/blog/824019

版权

offsetTop（原生js）：相对于body顶部的距离（父级有position时，则是相对于父级顶部的距离）

offset().top（jquery）：相对于body顶部的距离（任何情况下）

纵向滚动条长度：document.body.scrollTop（原生js），$(document).scrollTop()（jquery）；

当他们遇上zoom时，会发生什么呢？话不多说，直接上代码：

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="description" content="">
        <style>
            *{
                padding:0;
                margin:0;
            }
            div{
                width:200px;
                height:200px;
                background-color: #b3d4fc;
                border:solid 1px red;
            }
            .q,.w,.e{
                width:250px;
                height:1200px;
                border:solid 2px black;
            }
            .e .r{
                background-color: greenyellow;
            }
            .e{
                position: relative;
            }
        </style>
    </head>
    <body>
        <div class="q">
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
        </div>
        <div class="w">
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
        </div>
        <div class="e">
            <div>1</div>
            <div>1</div>
            <div class="r">1</div>
            <div>1</div>
            <div>1</div>
        </div>

    </body>
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script>
        console.log( $(".r").get(0).offsetTop,$(".r").offset().top );
        console.log( document.body.scrollTop,$(document).scrollTop())
        $("body").css("zoom",0.5);
        console.log( document.body.scrollTop,$(document).scrollTop())
        console.log( $(".r").get(0).offsetTop,$(".r").offset().top );
    </script>
</html>

截图01 截图02

随便选取截图观察可得：无论zoom为何值，document.body.scrollTop与$(document).scrollTop()都是相等的；假设$(".r").get(0).offsetTop有zoom值为0~1时，记为 A ；zoom为1时，记为 B ；假设$(".r").offset().top 有zoom值为0~1时，记为 C ；zoom为1时，记为 D；则有如下关系： A-B=C-D+$(document).scrollTop()；并且A与B的值相近；

转载于:https://my.oschina.net/u/2984352/blog/824019

chiye4241

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
当offsetTop、offset().top、scrollTop、scrollTop()遇上zoom的时候

offsetTop（原生js）：相对于body顶部的距离（父级有position时，则是相对于父级顶部的距离）offset().top（jquery）：相对于body顶部的距离（任何情况下）纵向滚动条长度：document.body.scrollTop（原生js），$(document)....
复制链接

扫一扫