¿Cómo deshabilitar el desplazamiento en el cuerpo en iOS 13 safari (cuando se guarda como PWA en la pantalla de inicio)?

Question 1

El problema:

Sé que esta pregunta se ha hecho una docena de veces, pero ninguna de las soluciones a esas preguntas funcionó para mí.

Quiero que el elemento del cuerpo en iOS 13 Safari no se desplace. Esto significa que no hay desplazamiento ni efecto de rebote elástico (desbordamiento-desplazamiento).

Tengo dos elementos uno al lado del otro en los que he establecido overflow: scroll;esos deberían desplazarse, solo el cuerpo que los rodea no debería.

Todas las soluciones que probé simplemente no funcionan en aplicaciones web progresivas que tienen la siguiente etiqueta dentro de su cabeza y se guardan en la pantalla de inicio.

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

Soluciones que he probado:

prueba 1: configuración de desbordamiento oculto en el cuerpo y/o html. No funcionó para iOS 13 safari.

https://stackoverflow.com/a/18037511/10551293

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

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

no hace nada en iOS 13 safari pero funciona en macOS safari y Firefox.

prueba 2: posición de ajuste fijada en el cuerpo. No funciona para mí porque cuando el usuario se desplaza, el cuerpo no lo hace, pero el desplazamiento aún evita que mis dos elementos internos se desplacen mientras se anima el rebote de desbordamiento.

https://stackoverflow.com/a/47874599/10551293

body {
    position: fixed;
}

solo pone el cuerpo sobre el desplazamiento de la página. El desplazamiento (overflow-scrolling) ocurre a través del cuerpo fijo…

prueba 3: evitando que se mueva el valor predeterminado al tocar. No funcionó (es una solución más antigua…).

https://stackoverflow.com/a/49853392/10551293

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

No hace nada por lo que puedo decir. Ni en safari ni en Firefox.

prueba 4: evitando el desplazamiento predeterminado de la ventana y volviendo a establecer la posición de desplazamiento en 0. No es viable debido a las animaciones con errores.

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

establece la posición de desplazamiento de nuevo en 0, pero el desplazamiento de desbordamiento aún se aplica, lo que termina en un comportamiento defectuoso.

Un fragmento que lo demuestra:

Para probarlo usted mismo, guarde el fragmento a continuación como un archivo html y guárdelo en la pantalla de inicio de un iPad (o simulador de iPad). El cuerpo de repente se vuelve desplazable cuando se guarda en la pantalla de inicio.

<!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>

Ninguno de ellos funcionó de manera aceptable para mí, ahora, ¿cómo hago esto para que funcione correctamente en iOS 13 Safari (cuando se guarda como PWA en la pantalla de inicio)?

Question 2

Combiné el intento 2 y el intento 4 de la pregunta. El cuerpo fijo no muestra desplazamiento de desbordamiento y el reinicio de desplazamiento evita la animación larga del desplazamiento de desbordamiento en segundo plano. Es muy feo pero funciona un poco.

body {
  position: fixed;
}

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

Question 3

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

Question 4

En mi caso (la aplicación requiere arrastrar para organizar los elementos) configuración acción táctil a none funcionó para evitar el desplazamiento al arrastrar ciertos elementos.

p.ej

draggableElement.css('touch-action', 'none') // disable actions
draggableElement.css('touch-action', 'auto') // restore actions

Question 5

Simplemente agregue una acción táctil: ninguna al cuerpo en CSS:

body{

touch-action:none;

}

Question 6

https://github.com/willmcpo/cuerpo-desplazamiento-bloqueo

No puedo probarlo en este momento, pero parece que vale la pena intentarlo.

Question 7

Tuve un problema similar antes y hasta ahora, usar el siguiente enfoque ha funcionado mejor:

primero, habilite el desplazamiento en su contenedor de contenido aplicando -webkit-overflow-scrolling: touch
en segundo lugar, aplicar las siguientes reglas:

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

Question 8

window.addEventListener('touchend', _ => {
    window.scrollTo(0,0)
});

Esto hará que el cuerpo vuelva a 0,0 después de que el usuario suelte el cuerpo, lo que le permitirá desplazarse inmediatamente hacia abajo sin animaciones extrañas, además de regresar de inmediato. Lo probé con una animación de desplazamiento suave, pero no siempre anima lo suficientemente rápido. Esto evitará el bloqueo de pantalla que ocurre cuando el cuerpo se desplaza desde el desplazamiento elástico de rebote en ese iPhone y solo se activa cuando el usuario suelta el tirón.

El problema:

Soluciones que he probado:

Un fragmento que lo demuestra:

Ninguno de ellos funcionó de manera aceptable para mí, ahora, ¿cómo hago esto para que funcione correctamente en iOS 13 Safari (cuando se guarda como PWA en la pantalla de inicio)?

¿Ha sido útil esta solución?