好吧，这个真的难倒我了。我正在寻找一种方法来可靠地定位 position: fixed当用户捏合缩放后，元素相对于静态定位的元素。
更多详细信息:这是我在使用 jQuery 插件时遇到的问题，Bigfoot 。本质上，它将脚注变成可点击的按钮，生成带有指向按钮的工具提示的弹出窗口。工具提示必须是 position: fixed ;弹出窗口直接放置在包含脚注链接的段落之后，以便默认情况下相同的段落/图像/其他样式适用于脚注内容。这意味着position: absolute在移动设备上更容易使用的 基本上已经过时了。该脚本还需要能够可靠地计算脚注按钮与可见页面顶部/底部之间的空间(以便弹出框可以位于顶部或底部，具体取决于哪个有足够的空间)和右侧/可见页面的左侧(以便工具提示可以实际指向弹出窗口)。
我尝试过的
当视口(viewport)未缩放时，有效的方法类似于(使用 jQuery):
var $target = $(".target");
$(".popover").css({
top: $target.offset().top - $(window).scrollTop(),
left: $target.offset().left
});
但是，当视口(viewport)滚动时，此方法无法排列元素。我可以通过比较内部宽度 ( window.innerWidth ) 与页面的总宽度 ( document.documentElement.clientWidth ) 来了解缩放系数。我还可以使用 window.pageXOffset/pageYOffset 找到水平/垂直偏移(这些数字似乎并不是视口(viewport)缩放时屏幕水平滚动的实际像素数，但我不太确定)。然而，我还没有找到任何方法将这些信息组合在一起来找到实际的left/top将按钮与其工具提示正确对齐的偏移值。
示例
要了解脚本实际应该执行的操作(以及由于移动设备上的缩放而发生的奇怪的错位)，您可以查看元素页面上的按钮 ( http://www.bigfootjs.com )。正确对齐 <div class='aimer'> 的东西(即 position: fixed )直接在静态 <div class='target'> 上当视口(viewport)在移动设备上缩放时，我正在寻找以下示例标记(至少需要支持当前的移动 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;
}
提前非常感谢您的帮助，如果我可以提供任何其他信息，请告诉我!
最佳答案
这可以满足我的需求。不过，它依赖于 position:absolute。 position:fixed 在 chrome 和 safari 上的行为在视口(viewport)缩放级别方面有所不同。
document.addEventListener('scroll', function(){
TweenMax.set(element, {
left: window.pageXOffset,
top: window.pageYOffset,
scale: 1 / ($document.width() / innerWidth),
})
})
关于javascript - 定位位置: fixed elements correctly after pinch zoom，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23941997/