Heim > Web-Frontend > HTML-Tutorial > So verwenden Sie getBoundingClientRect(), um ein festes Scrollen von Div-Containern zu erreichen

So verwenden Sie getBoundingClientRect(), um ein festes Scrollen von Div-Containern zu erreichen

php中世界最好的语言
Freigeben: 2018-02-23 10:25:50
Original
2283 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie mit getBoundingClientRect() das Scrollen und Korrigieren von Div-Containern erreichen und wie Sie mit getBoundingClientRect() das Scrollen und Korrigieren von Div-Containern erreichen. Was sind die Vorsichtsmaßnahmen? ?Das Folgende ist ein praktischer Fall, schauen wir uns das gemeinsam an.

Die Methode ele.getBoundingClientRect() dient dazu, die Position eines Elements im gesamten Ansichtsfenster zu ermitteln.

Die Werte, die zurückgegeben werden können, sind Breite, Höhe, oben, links, x, y, rechts,unten

Szene

Wenn sich eines Ihrer Divs in der Mitte des Ansichtsfensters

befindet

Der gewünschte Effekt besteht darin, dass beim Scrollen der Seite zu diesem Div dieses Div oben auf der Seite fixiert wird und andereunverändert scrollen

Idee

Erreichen Sie dies. Die Idee besteht darin, diese Methode zu verwenden, um den Spitzenwert dieses Divs zu erhalten.

Dieser Spitzenwert ist der Spitzenwert dieses Divs im Ansichtsfenster.

Hören Sie sich das Scrollen der Seite an Ereignis Dann, wenn dies Wenn der Spitzenwert

, um einen solchen Effekt zu erzielen

Ich glaube, das haben Sie Ich habe die Methode nach dem Lesen dieser Fälle gemeistert. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Was sind die Unterschiede zwischen der Standard-Schreibmethode von HTML und dem von Dreamweaver generierten Code

So fügen Sie Dateien im HTML-Flash-Videoformat (FLV, SWF) hinzu

So stellen Sie die Eingabe durch Deaktiviert und Nur-Lesen auf schreibgeschützten Effekt ein

Das obige ist der detaillierte Inhalt vonSo verwenden Sie getBoundingClientRect(), um ein festes Scrollen von Div-Containern zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage