web-dev-qa-db-fra.com

Comment désactiver le défilement sur le corps dans iOS 13 Safari (lorsqu'il est enregistré en tant que PWA sur l'écran d'accueil)?

Le problème:

Je sais que cette question a été posée des dizaines de fois, mais aucune des solutions à ces questions n'a fonctionné pour moi.

Je veux que l'élément body sur iOS 13 safari ne défile pas. Cela signifie pas de défilement et pas d'effet de rebond élastique (défilement par débordement).

J'ai deux éléments côte à côte sur lesquels j'ai posé overflow: scroll;, ceux-ci devraient défiler, juste le corps autour d'eux ne devrait pas.

Toutes les solutions que je n'ai tout simplement pas fonctionnent dans les applications Web progressives qui ont la balise suivante dans leur tête et sont enregistrées sur l'écran d'accueil.

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

Solutions que j'ai essayées:

essayez 1: paramètre de débordement masqué sur le corps et/ou html. Cela n'a pas fonctionné pour le safari iOS 13.

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

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

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

ne fait rien dans iOS 13 Safari mais fonctionne dans macOS Safari et Firefox.

essayez 2: position de réglage fixée sur le corps. Cela ne fonctionne pas pour moi car lorsque l'utilisateur fait défiler, le corps ne le fait pas, mais le défilement empêche toujours mes deux éléments internes de défiler pendant que le rebond de débordement s'anime.

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

body {
    position: fixed;
}

ne place le corps que sur le défilement de la page. Le défilement (débordement-défilement) se produit à travers le corps fixe ...

essayez 3: empêchant la valeur par défaut au toucher déplacé. Cela n'a pas fonctionné (est une solution plus ancienne ...).

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

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

ne fait rien comme je peux le dire. Pas dans Safari ni dans Firefox.

essayez 4: empêchant la valeur par défaut lors du défilement de la fenêtre et ramenant la position de défilement à 0. N'est pas viable à cause des animations boguées.

window.onscroll = function(e) {
    e.preventDefault();
    window.scrollTo(0, 0);
};

remet la position de défilement à 0 mais le défilement par débordement s'applique toujours, ce qui aboutit à un comportement bogué.

Un extrait de code qui le démontre:

Pour le tester vous-même, enregistrez l'extrait ci-dessous en tant que fichier html et enregistrez-le sur l'écran d'accueil d'un iPad (ou d'un simulateur iPad). Le corps devient soudainement défilable lorsqu'il est enregistré sur l'écran d'accueil.

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

Aucun d'entre eux n'a fonctionné de manière acceptable pour moi, maintenant comment faire cela pour que cela fonctionne correctement dans iOS 13 Safari (lorsqu'il est enregistré en tant que PWA sur l'écran d'accueil)?

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

Cela ramènera le corps à 0,0 après que l'utilisateur lâche le corps, permettant à l'utilisateur de faire défiler immédiatement vers le bas sans aucune animation étrange en plus de revenir immédiatement. Je l'ai essayé avec une animation de défilement fluide mais elle ne s'anime pas toujours assez rapidement. Cela empêchera le verrouillage de l'écran qui se produit lorsque le corps défile du défilement élastique de rebond sur cet iPhone et ne se déclenche que lorsque l'utilisateur relâche la traction.

0
StarPlayrX