Überwindung des „Overscrolling“ auf Webseiten

In Chrome für Mac ist „Overscrolling“ ein unerwünschter Effekt, der es Benutzern ermöglicht, eine Seite über ihren normalen Anzeigebereich hinaus zu ziehen. wie im bereitgestellten Bild zu sehen. Um dieses Problem zu beheben und die Benutzererfahrung zu verbessern, ziehen Sie die folgenden zwei Methoden in Betracht:

Methode 1: Overscrolling einschränken

Wenn Sie Overscrolling vollständig deaktivieren möchten, verwenden Sie den folgenden CSS-Code:

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

body {
    height: 100%;
    overflow: auto;
}

Die overflow:hidden-Eigenschaft des -Elements verhindert, dass Überlaufinhalte sichtbar werden, wodurch die Seite effektiv innerhalb ihres Ansichtsfensters begrenzt wird. Die overflow: auto-Eigenschaft des

Methode 2: Anpassen des Overscrolling-Verhaltens

Um das Overscrolling-Verhalten anzupassen und zu steuern, verwenden Sie die Touch-Action-Eigenschaft:

body {
    -webkit-touch-callout: none;
    -webkit-touch-action: manipulation;
}

Der obige Code verhindert die Textauswahl und ermöglicht gleichzeitig eine allgemeine Touch-Manipulation, einschließlich Scrollen innerhalb der definierten Höhe der Seite. Für eine detailliertere Steuerung können Sie präzise Touch-Aktionswerte angeben, z. B. Pan-X, um nur horizontales Scrollen zu ermöglichen.