[Webkit-unassigned] [Bug 153852] <body> with overflow:hidden CSS is scrollable on iOS

Wed Apr 1 19:37:31 PDT 2020

https://bugs.webkit.org/show_bug.cgi?id=153852

kdark93 at gmail.com changed:

           What    |Removed                     |Added
----------------------------------------------------------------------------
                 CC|                            |kdark93 at gmail.com

--- Comment #43 from kdark93 at gmail.com ---
Here's a work around for iOS Safari.

Since iOS Safari prevents attaching the overflow property to the body tag, you can use the position: fixed attribute. Trouble with position: fixed is that when you want to remove the attribute (or make the body scrollable again) the page jumps back up to the top. To fix this, you can use window.scrollTo() to scroll the page back to where the user last scrolled to. Below is the code:

    lockBackground = ({menuOpen}) => {
        if (menuOpen) {
            const offsetY = window.pageYOffset;
            document.body.style.top = `${-offsetY}px`;
            document.body.classList.add('js-lock-position');

        } else {
            const offsetY = Math.abs(parseInt(document.body.style.top || 0, 10));
            document.body.classList.remove('js-lock-position');
            document.body.style.removeProperty('top');
            window.scrollTo(0, offsetY || 0);
        }
    }

   .js-lock-position {
     position: fixed;
     overflow: hidden;
   }

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20200402/92a6f841/attachment-0001.htm>