Question

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

更多细节：这是我遇到的jQuery插件Bigfoot遇到的问题。从本质上讲，它将脚注转换为可点击的按钮，这些按钮通过指向按钮的工具提示生成弹出式窗口。工具提示必须为position: fixed;弹出窗口直接放在包含脚注链接的段落之后，以便默认情况下相同的段落/图像/其他样式应用于脚注内容。这意味着position: absolute基本上是在移动设备上更容易使用的var $target = $(".target"); $(".popover").css({ top: $target.offset().top - $(window).scrollTop(), left: $target.offset().left });。该脚本还需要能够可靠地计算脚注按钮和可见页面的顶部/底部之间的空间（以便弹出窗口可以位于顶部或底部，具体取决于具有足够空间）和右侧/在可见页面的左侧（以便工具提示可以定位到实际指向弹出窗口）。

我尝试过什么

当视口没有缩放时适用的东西是（使用jQuery）：

window.innerWidth

但是，在滚动视口时，此方法无法排列元素。通过比较内部宽度（document.documentElement.clientWidth）和页面的总宽度（window.pageXOffset/pageYOffset），我可以看到缩放因子是什么。我还可以找到left的水平/垂直偏移（这些数字似乎不是视口缩放时屏幕水平滚动的实际像素数，但我并不是真的当然）。但是，我没有找到任何方法将这些信息组合在一起，以找到将按钮与其工具提示正确对齐的实际top / <div class='aimer'>偏移值。

实施例

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

HTML

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;
}

CSS

{{1}}

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

Answer 1

这符合我的需要。但它依赖于APP_SERVICE。 position: absolute在chrome vs safari上的行为与视口缩放级别不同。

position: fixed

定位位置：夹紧变焦后正确固定元件

我尝试过什么

实施例

HTML

CSS

1 个答案: