定位位置：捏缩放后正确固定元素答案

【问题标题】：Positioning position: fixed elements correctly after pinch zoom定位位置：捏缩放后正确固定元素
【发布时间】：2014-07-19 11:16:33
【问题描述】：

好吧，这个真的难倒我。我正在寻找一种在用户捏合缩放后可靠地定位 position: fixed 元素相对于静态定位元素的方法。

更多细节：这是我在使用 jQuery 插件 Bigfoot 时遇到的问题。本质上，它将脚注变成了可点击的按钮，这些按钮会生成带有指向按钮的工具提示的弹出框。工具提示必须是position: fixed；弹出框直接放在包含脚注链接的段落之后，以便默认情况下相同的段落/图像/其他样式适用于脚注内容。这意味着在移动设备上更容易使用的position: absolute 基本上已经出局了。该脚本还需要能够可靠地计算脚注按钮和可见页面的顶部/底部之间的空间（以便弹出框可以定位在顶部或底部，取决于哪个有足够的空间）和右侧/可见页面的左侧（以便工具提示可以定位为实际指向弹出框）。

我的尝试

当视口没有被缩放时起作用的是（使用 jQuery）：

var $target = $(".target");
$(".popover").css({
    top: $target.offset().top - $(window).scrollTop(),
    left: $target.offset().left
});

但是，当视口滚动时，此方法无法对齐元素。我可以通过比较内部宽度 (window.innerWidth) 和页面的总宽度 (document.documentElement.clientWidth) 来了解缩放系数。我还可以使用window.pageXOffset/pageYOffset 找到水平/垂直偏移量（这些数字似乎不是缩放视口时屏幕水平滚动的实际像素数量，但我不太确定）。但是，我还没有找到任何方法将这些信息组合在一起以找到实际的left/top 偏移值，该偏移值将正确地将按钮与其工具提示对齐。

示例

要了解脚本实际上应该做什么（以及由于移动设备上的缩放而发生的奇怪错位），您可以查看项目页面上的按钮 (http://www.bigfootjs.com)。当使用以下示例标记在移动设备上放大视口时，将<div class='aimer'>（即position: fixed）直接对齐到静态<div class='target'> 上的东西是我正在寻找的（至少需要支持当前移动 Safari）：

HTML

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <div class="aimer"></div>
        <div class="target"></div>
    </body>
</html>

CSS

body {
    background-color: lightgray;
}

.target,
.aimer {
    width: 1em;
    height: 1em;
    background-color: red;
    border-radius: 1em;
}

.target { margin: 10em 0 40em 6em; }

.aimer {
    position: absolute;
    background-color: white;
}

非常感谢您的帮助，如果有任何其他信息可以提供，请告诉我！

【问题讨论】：

我曾经花了很多时间为自己研究这个。我尝试了一些东西，但都没有很好的效果。最终，我们决定使用元标记 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> 禁用缩放，而是使用 CSS 媒体查询和 em 来确保网站在没有缩放的情况下看起来很吸引人。
这适用于移动浏览器，但 Safari 桌面在捏合或缩放时会错位元素。

标签： javascript jquery css css-position

【解决方案1】：

这可以满足我的需求。不过，它依赖于position: absolute。在视口缩放级别方面，position: fixed 在 chrome 和 safari 上的行为不同。

document.addEventListener('scroll', function(){
    TweenMax.set(element, {
        left: window.pageXOffset,
        top: window.pageYOffset,
        scale: 1 / ($document.width() / innerWidth),
    })
})

【讨论】：