Das Problem:
Ich weiß, dass diese Frage ein Dutzend Mal gestellt wurde, aber keine der Lösungen zu diesen Fragen hat bei mir funktioniert.
Ich möchte, dass das Body-Element auf iOS 13 Safari nicht scrollt. Dies bedeutet kein Scrollen und keinen Elastic-Bounce-Effekt (Overflow-Scrolling).
Ich habe zwei Elemente nebeneinander, auf die ich gesetzt habe overflow: scroll;
diese sollten scrollen, nur der Körper um sie herum sollte nicht.
Alle Lösungen, die ich ausprobiert habe, funktionieren einfach nicht in progressiven Webapps, die das folgende Tag in ihrem Kopf haben und auf dem Homescreen gespeichert sind.
<meta name="apple-mobile-web-app-capable" content="yes">
Lösungen, die ich ausprobiert habe:
Versuch 1: Festlegen des Überlaufs auf Körper und/oder HTML ausgeblendet. Funktionierte nicht für iOS 13 Safari.
https://stackoverflow.com/a/18037511/10551293
html {
position: relative;
overflow: hidden;
height: 100%;
}
body {
position: relative;
overflow: hidden;
height: 100%;
}
tut nichts in iOS 13 Safari, funktioniert aber in macOS Safari und Firefox.
Versuch 2: am Körper fixierte Einstellposition. Funktioniert bei mir nicht, denn wenn der Benutzer scrollt, funktioniert der Körper nicht, aber das Scrollen verhindert immer noch, dass meine beiden inneren Elemente scrollen, während der Overflow-Bounce animiert wird.
https://stackoverflow.com/a/47874599/10551293
body {
position: fixed;
}
legt den Körper nur über das Scrollen der Seite. Das Scrollen (Überlauf-Scrollen) geschieht durch den festen Körper …
Versuch 3: verhindert die Standardeinstellung bei Berührung verschoben. Hat nicht funktioniert (ist eine ältere Lösung …).
https://stackoverflow.com/a/49853392/10551293
document.addEventListener("touchmove", function (e) {
e.preventDefault();
}, { passive: false });
tut nichts, wie ich sagen kann. Weder in Safari noch in Firefox.
Versuch 4: Verhindern des standardmäßigen Scrollens des Fensters und Zurücksetzen der Scrollposition auf 0. Ist wegen fehlerhafter Animationen nicht realisierbar.
window.addEventListener("scroll", (e) => {
e.preventDefault();
window.scrollTo(0, 0);
});
setzt die Scroll-Position auf 0 zurück, aber das Overflow-Scrolling gilt immer noch, was zu einem fehlerhaften Verhalten führt.
Ein Ausschnitt, der es demonstriert:
Um es selbst zu testen, speichern Sie das folgende Snippet als HTML-Datei und speichern Sie es auf dem Startbildschirm auf einem iPad (oder iPad-Simulator). Der Körper wird plötzlich scrollbar, wenn er auf dem Startbildschirm gespeichert wird.
<!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>
Ich denke, Sie müssen die Höhe fest einstellen, damit der Überlauf ausgeblendet wird, wie folgt:
html { position: relative; overflow: hidden; height: 90vh; }
– Anshul Gupta
5. Dezember 2019 um 11:58 Uhr
Hat auch nicht funktioniert, das habe ich auch schon probiert…
– Swift-Luchs
5. Dezember 2019 um 12:59 Uhr
Können Sie eine Geige oder etwas für die Vorschau von Elementen hinzufügen? Ich kann Ihre Elemente nicht abbilden
– Anshul Gupta
5. Dezember 2019 um 13:07 Uhr
Es war in meiner Frage nicht klar, es funktioniert nur nicht, wenn die Seite als Web-App auf dem Startbildschirm gespeichert ist und wenn sie den folgenden Meta-Tag hat:
– Swift-Luchs
5. Dezember 2019 um 13:24 Uhr
Und ich habe ein Code-Snippet hinzugefügt.
– Swift-Luchs
5. Dezember 2019 um 13:31 Uhr