在移动设备上的缩放浏览器窗口上固定位置 div

Question

在桌面浏览器中缩放 HTML 页面时，固定位置 div 将像页面的其余部分一样缩放并保持其相对于视口的位置固定。 这曾经在 Chrome 移动浏览器上也是如此（它在版本 39 中仍然如此），但在 Chrome for mobile 40 上它开始表现得与 Safari for mobile 类似，并且当页面缩放时固定元素固定为缩放如果页面处于 100% 缩放（有一些警告），它们将被定位到的位置。

这是一个带有位置 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 更感兴趣。

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