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

最新推荐文章于 2026-05-19 07:18:00 发布

转载最新推荐文章于 2026-05-19 07:18:00 发布 · 558 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

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

标签

#javascript #ViewUI

本文通过实例展示了在不同zoom值下，原生JS与jQuery中元素的offsetTop及offset().top属性的变化规律，并分析了纵向滚动条长度的影响。

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