移动端浏览器窗口缩放时固定位置的div

Question

当在桌面浏览器中缩放HTML页面时，固定位置的div将与页面的其余部分一起缩放，并保持相对于视口的固定位置。这在Chrome移动浏览器上也是如此（在版本39中仍然是这样），但在Chrome移动版40上，它开始表现得类似于Safari移动版，当页面被缩放时，固定元素会固定在缩放后的文档上，就像页面处于100％缩放时它们应该被定位的那个点（有一些注意事项）。

这是一个带有position:fixed的div的页面： http://betterstatistics.org/tests/fixedpos 对于移动设备，我根据缩放比例缩放div，并保持position:fixed属性，以便不必在滚动时重新定位它，我想根据缩放设置位置。

以下是我的尝试： http://betterstatistics.org/tests/fixedpos/attempt001.html （仅限移动设备）

相关代码：

orig_w = 300;
orig_h = 100;
document.body.addEventListener('touchend', repositionDiv);

function repositionDiv(){
  var zoom = getZoom();
  var d1 = document.getElementById("div_br");
  var w = (orig_w / zoom);
  var h = (orig_h / zoom);
  d1.style.width = w + 'px';
  d1.style.height = h + 'px';
  d1.style.left = (window.scrollX + window.innerWidth - d1.offsetWidth) +'px';
  d1.style.top = (window.innerHeight - d1.offsetHeight) +'px';
}

function getZoom(){
  return document.documentElement.clientWidth / window.innerWidth;
}

这段代码几乎可以在Android Chrome移动端上运行，但是我还没有成功地得到滚动后的高度位置，我也尝试了以下方法：

d1.style.top = (window.scrollY + window.innerHeight - d1.offsetHeight) +'px';

并且：

d1.style.top = (window.scrollY / zoom + window.innerHeight - d1.offsetHeight) +'px';

我知道有一些类似的问题，但大多是在JQuery中，我没有看到一个有解决方案的问题，它们也大多与iOS有关，但现在我更关心的是Android Chrome。

- Piwakawaka

---

这段代码可以使用绝对定位，并在滚动事件上调用repositionDiv函数来使其工作。您可以在滚动发生时隐藏元素以防止跳动。或者，您可以等待position:device-fixed在2010年的quirksmode上建议实现：http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html看起来可能会发生，请参见以下评论：https://plus.google.com/+RickByers/posts/bpxrWN4G3X5 - Piwakawaka

Answer 1

通过新对象 visualViewport，您现在可以获取相对于布局视口的可视视口偏移量：

<style>
#windowtop {
    width: 100%;
    height: 20px;
    position: fixed;
    top: 0px;
}
</style>


<div id="windowtop">
fixed
</div>

<script>
    if (window.visualViewport) {
        var windowtop = document.getElementById("windowtop");

        function onWindowScroll() {
            windowtop.style.top = window.visualViewport.offsetTop + "px";
            windowtop.style.left = window.visualViewport.offsetLeft + "px";
            windowtop.style.width = window.visualViewport.width + "px";
        }
        onWindowScroll();
        window.visualViewport.addEventListener("resize", onWindowScroll);
        window.visualViewport.addEventListener("scroll", onWindowScroll);
        // https://developers.google.com/web/updates/2017/09/visual-viewport-api#gotchas
        window.addEventListener('scroll', onWindowScroll);
    }

</script>

<br>
<br>
BEGIN
<br>
<div style="height: 1500px;">
</div>
<br>
END

- basin