CODEWITHSUNDEEP
javascriptcsscss-positionchrome-for-android
Piwakawaka
Piwakawaka

Reputation: 519

Fixed position div on zoomed browser window on mobile

When zooming an HTML page in a desktop browser a fixed position div will scale like the rest of the page and keep its position fixed relative to the viewport. This used to also be the case on the Chrome mobile browser (It still behaved that way in version 39), but on Chrome for mobile 40 it started behaving similar to Safari for mobile and when the page is scaled fixed elements are fixed to the scaled document at the point that they would have been positioned at if the page were at 100% zoom (with some caveats).

This is a page with a div with position:fixed http://betterstatistics.org/tests/fixedpos

For mobile I scale the div according to zoom, and keeping the position:fixed property so that I don't have to reposition it on scroll, I would like to set the position according to the zoom.

Here is my attempt: http://betterstatistics.org/tests/fixedpos/attempt001.html (for mobile only)

The relevant lines:

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

It almost works on Android Chrome for mobile, but I haven't managed to get the height position after scrolling correct, I also tried:

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

and: 

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

I know there are some similar questions, but most are in JQuery, and I didn't see one with a solution, they were also mostly concerning iOS, but for now I am more interested in Android Chrome.

Upvotes: 5

Views: 2634

Answers (1)

basin
basin

Reputation: 4190

With the new object visualViewport you can now get the visual viewport offset relative to the layout viewport:

<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

Upvotes: 4

Related Questions