Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie erreicht man ein reibungsloses Scrollen ohne Seitenbewegung in Containern mit fester Position?

Susan Sarandon
Freigeben: 2024-11-10 14:35:03
Original
613 Leute haben es durchsucht

How to Achieve Smooth Scrolling Without Page Movement in Fixed-Position Containers?

ScrollIntoView() Reibungsloses Scrollen ohne Seitenbewegung

Bei Verwendung von ScrollIntoView(true) zum Scrollen von Elementen innerhalb eines Containers mit fester Position ist dies der Fall Es wurde beobachtet, dass sich die gesamte Seite leicht verschiebt. Dies ist beabsichtigtes Verhalten, kann aber in manchen Fällen unerwünscht sein.

Bei Containern mit fester Position kann die folgende Lösung verhindern, dass die Seite verschoben wird:

element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })
Nach dem Login kopieren

Diese geänderte Syntax gibt an :

  • Verhalten: 'smooth': Scrollt reibungslos
  • block: 'nearest': Scrollt die nächstgelegene Kante des Elements in die Ansicht
  • inline: 'start' : Scrollt die Anfangskante des Elements innerhalb des übergeordneten Elements in die Ansicht

Durch Angabe dieser Parameter scrollt das Containerelement reibungslos und bringt das Zielelement in die Ansicht, ohne die Seitenposition zu beeinflussen.

Das obige ist der detaillierte Inhalt vonWie erreicht man ein reibungsloses Scrollen ohne Seitenbewegung in Containern mit fester Position?. 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