CODEWITHSUNDEEP
javascripthtmlcssiosmobile-safari
swift-lynx
swift-lynx

Reputation: 3765

How to disable scrolling on body in iOS 13+ Safari (when saved as PWA to the homescreen)?

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)?

Upvotes: 35

Views: 34534

Answers (7)

Максим Мартынов
Максим Мартынов

Reputation: 1227

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);
  }, []);
};

Upvotes: 0

swift-lynx
swift-lynx

Reputation: 3765

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

Upvotes: 15

Disembleergon
Disembleergon

Reputation: 443

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

body{

touch-action:none;

}

Upvotes: 18

Blallo
Blallo

Reputation: 468

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

Upvotes: 7

StarPlayrX
StarPlayrX

Reputation: 53

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.

Upvotes: 0

Georgi Yankov
Georgi Yankov

Reputation: 441

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

Upvotes: 3

Petrolea
Petrolea

Reputation: 125

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

Upvotes: 0

Related Questions