Heim > Web-Frontend > CSS-Tutorial > Wie kann ich das Scrollen in Mobile Safari effektiv deaktivieren?

Wie kann ich das Scrollen in Mobile Safari effektiv deaktivieren?

Patricia Arquette
Freigeben: 2024-12-05 17:43:11
Original
191 Leute haben es durchsucht

How to Effectively Disable Scrolling in Mobile Safari?

Deaktivieren des Scrollens in Mobile Safari: Überwindung plattformspezifischer Macken

Bei der Arbeit mit langen Webseiten in Mobile Safari kann es wünschenswert sein, zu verhindern, dass Benutzer über das Scrollen hinaus scrollen zunächst sichtbarer Inhalt. Die Anwendung von overflow:hidden auf den element erzielt diesen Effekt auf dieser bestimmten Plattform nicht immer.

Um dieses Problem zu beheben, besteht eine bewährte Lösung darin, overflow:hidden sowohl auf die HTML- als auch auf die Body-Elemente anzuwenden. Dieser Ansatz steuert effektiv das Scrollverhalten im mobilen Safari:

html, body {
    overflow: hidden;
}
Nach dem Login kopieren

Wenn Sie jedoch speziell mit iOS 9 arbeiten, kann es zu leichten Abweichungen im erforderlichen Code kommen:

html, body {
    overflow: hidden;
    position: relative;
    height: 100%;
}
Nach dem Login kopieren

Diese Anpassungen stellen sicher, dass das Scrollen über den sichtbaren Teil der Seite hinaus im mobilen Safari deaktiviert ist, sodass Sie das gewünschte Layout und Benutzererlebnis erreichen können.

Das obige ist der detaillierte Inhalt vonWie kann ich das Scrollen in Mobile Safari effektiv deaktivieren?. 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