Heim > Web-Frontend > CSS-Tutorial > Wie kann man unerwünschtes „Overscrolling' in Chrome für Mac verhindern?

Wie kann man unerwünschtes „Overscrolling' in Chrome für Mac verhindern?

Patricia Arquette
Freigeben: 2024-10-30 10:32:03
Original
540 Leute haben es durchsucht

How to Eliminate Unwanted

Überwindung von „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, sollten Sie die folgenden zwei Methoden in Betracht ziehen:

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;
}
Nach dem Login kopieren

Die overflow: versteckte Eigenschaft auf der Das Element verhindert, dass überlaufender Inhalt sichtbar wird, und begrenzt so effektiv die Seite innerhalb ihres Ansichtsfensters. Die overflow: auto-Eigenschaft für den Das Element ermöglicht ein natürliches Scrollen innerhalb der festgelegten Höhe der Seite, schränkt jedoch das Overscrolling ein.

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;
}
Nach dem Login kopieren

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.

Das obige ist der detaillierte Inhalt vonWie kann man unerwünschtes „Overscrolling' in Chrome für Mac verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage