How to disable scrolling on body in iOS 13+ Safari (when saved as PWA to the homescreen)? [duplicate]
Asked Answered
D

7

33

The Problem:

I want the body element on iOS 13 Safari to not scroll. This means no scrolling, and no elastic bounce (overflow-scrolling) effect.

I have two elements next to each other on which I have set overflow: scroll;, those should scroll, just the body around them shouldn't.

All the solutions I've tried just don't work in progressive webapps that have the following tag inside their head and are saved to the homescreen.

<meta name="apple-mobile-web-app-capable" content="yes">

Solutions I've tried:

  1. setting overflow hidden on body and/or HTML. Didn't work for iOS 13 safari: https://stackoverflow.com/a/18037511

    html {  
        position: relative;
        overflow: hidden;
        height: 100%;
    }
    
    body {
        position: relative;
        overflow: hidden;
        height: 100%;
    }
    

    does nothing in iOS 13 Safari but works in macOS Safari and Firefox.

  2. setting position fixed on the body. Doesn't work for me because when the user scrolls, the body doesn't but the scrolling still prevents my two inner elements from scrolling while the overflow-bounce is animating: https://stackoverflow.com/a/47874599

    body {
        position: fixed;
    }
    

    only puts the body over the scrolling of the page. The scrolling (overflow-scrolling) happens through the fixed body.

  3. preventing the default on touch moved. Didn't work (is an older solution...): https://stackoverflow.com/a/49853392

    document.addEventListener("touchmove", function (e) {
        e.preventDefault();
    }, { passive: false });
    

    does nothing as I can tell. Not in Safari nor in Firefox.

  4. preventing the default on scrolling of the window and setting the scroll position back to 0. Is not viable because of buggy animations.

    window.addEventListener("scroll", (e) => {
        e.preventDefault();
        window.scrollTo(0, 0);
    });
    

    sets the scroll position back to 0 but the overflow-scrolling still applies which ends up in a buggy behaviour.


A snippet that demonstrates it:

To test it yourself, save the snippet below as an HTML file, and save it to the home screen on an iPad (or iPad simulator). The body suddenly becomes scrollable when saved to the home screen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
    <style>
        body, html {
            position: relative;
            overflow: hidden;
            height: 100%;
            width: 100%;
        }
        body {
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        nav, footer {
            width: 100%;
            height: 5rem;
            background: blue;
            flex-shrink: 0;
        }

        main {
            display: flex;
            height: 0;
            flex-grow: 1;
            padding: 2rem;
        }

        section {
            width: 50%;
            overflow: scroll;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        div {
            flex-shrink: 0;
            width: 25%;
            height: 18rem;
            margin: 1rem;
            background: red;
        }
    </style>

    <nav></nav>

    <main>
        <section>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </section>
        
        <section>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </main>

    <footer></footer>
</body>
</html>

None of them worked in an acceptable way for me. How do I do this so it works properly in iOS 13 Mobile Safari (when saved as a PWA to the home screen)?

Disaffect answered 5/12, 2019 at 10:26 Comment(6)
I think you need to set height fixed to make overflow hidden work, like this: html { position: relative; overflow: hidden; height: 90vh; }Cheston
Didn't work either, I've tried that too...Disaffect
Can you add a fiddle or something for preview of elements? I'm not able to images your elementsCheston
It wasn't clear in my question, it only doesn't work when the page is saved as a web app to the home screen and if it has the following meta tag: <meta name="apple-mobile-web-app-capable" content="yes">Disaffect
Try this answer #29895497 or this plugin: github.com/lazd/iNoBounceCheston
The proper thing to do is to post a bounty on the existing question asking for a modern solution, not re-post the same question.Rosemaryrosemond
D
14

I combined try 2 and try 4 from the question. The fixed body shows no overflow scrolling and the scroll reset prevents the long animation of the overflow scrolling in the background. It's really ugly but it kinda works.

body {
  position: fixed;
}
window.addEventListener("scroll", (e) => {
  e.preventDefault();
  window.scrollTo(0, 0);
});
Disaffect answered 21/8, 2020 at 7:6 Comment(1)
I needed full: body {position: fixed; left: 0; top: 0; right: 0; bottom: 0;}Isleen
I
13

Just add a touch-action:none to the body in CSS:

body{

touch-action:none;

}

Isobaric answered 28/7, 2020 at 8:11 Comment(0)
M
7
function unlockScroll () {
    const scrollY = this.body.style.top;
    document.body.style.position = '';
    document.body.style.top = '';
    document.body.style.left = '';
    document.body.style.right = '';
    window.scrollTo(0, parseInt(scrollY || '0') * -1);
};

function lockScroll () {
    document.body.style.position = 'fixed';
    document.body.style.top = `-${window.scrollY}px`;
    document.body.style.left = '0';
    document.body.style.right = '0';
};
Mosenthal answered 11/12, 2019 at 11:41 Comment(3)
This locks the scrolling on my two inner elements too.Disaffect
@swiftlynx did you put overflow on your inner elements?Mosenthal
For everyone who still needs this, i made an improved version available on github with MIT license and even an npm package: github.com/8lall0/body-lock. This takes into account vertical and horizontal overflow, and keeps the scrollbars to prevent the "jump" that a page can have if you remove the scrollbar, plus it adds a class to body if you need additional styling when you lock the body.Mosenthal
P
3

In my case (app requires dragging to arrange elements) setting touch-action to none worked to prevent scrolling when dragging certain elements.

e.g.

draggableElement.css('touch-action', 'none') // disable actions
draggableElement.css('touch-action', 'auto') // restore actions
Periodic answered 22/1, 2020 at 11:46 Comment(0)
T
0

I had a similar issue before and so far using the below approach has worked best:

  • first, enable scrolling on your content container by applying -webkit-overflow-scrolling: touch

  • second, apply the following rules:

/* this part makes sure there is nowhere left to scroll */

html {
    position: static;
    overflow-y: hidden;
    height: 100%;
    max-height: 100%;
}

/* all properties don't necessarily need to be applied on both elements,
this is only used to override any existing code */

body {
    overflow: hidden;
    height: 100%;
    max-height: 100%;
}
Trichotomy answered 16/12, 2019 at 14:25 Comment(1)
Doesn't seem to be doing anything in mobile safari, v605/1.15Teillo
R
0
window.addEventListener('touchend', _ => {
    window.scrollTo(0,0)
});

This will snap the body back to 0,0 after the user lets go of the body, allowing the user to immediately scroll down without any weird animations besides snapping back right away. I tried it with a smooth scroll animation but it doesn't always animate fast enough. This will prevent the screen lock that occurs when the body scrolls from the bounce elastic scroll on that iPhone and is only triggered when the user lets go of the pull.

Ratline answered 17/6, 2020 at 3:21 Comment(0)
P
0

For me worked:

import { useEffect } from "react";

export const useOverscrollHandler = () => {
  useEffect(() => {
    const onScroll = (e: any) => {
      e.preventDefault();
      window.scrollTo(0, 0);
    };

    window.addEventListener("scroll", onScroll);

    return () => window.removeEventListener("scroll", onScroll);
  }, []);
};

Petitionary answered 18/8, 2022 at 16:23 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.