Wie scrolle ich in JavaScript zu Elementen innerhalb begrenzter Divs?

Scrollen zu Elementen innerhalb begrenzter Divs

In der Webentwicklung kann das Scrollen innerhalb von Elementen auf einer Seite für die Benutzererfahrung von entscheidender Bedeutung sein. Ein häufiges Problem für Entwickler ist das Scrollen zu Elementen innerhalb eines gescrollten Div.

Problem:

Ein Benutzer möchte auf ein Element innerhalb eines gescrollten Div klicken und es automatisch sehen Scrollen Sie zur Ansicht. Die Verwendung der folgenden JavaScript-Methode führt jedoch dazu, dass die gesamte Seite gescrollt wird, einschließlich des Div selbst. Dieses Verhalten ist nicht erwünscht.

document.getElementById(chr).scrollIntoView(true);

Lösung:

Um nur das Div zu scrollen, um das Zielelement anzuzeigen, müssen Sie den oberen Versatz des Elements relativ zu seinem berechnen parent (der gescrollte Div-Container).

Die Variable topPos enthält jetzt den Abstand zwischen der Oberseite des scrollenden Divs und dem Zielelement.

var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;

Um das Div an diese Position zu scrollen, Verwenden Sie scrollTop:

Prototype Framework:

document.getElementById('scrolling_div').scrollTop = topPos;

Wenn Sie das Prototype JS-Framework verwenden, können Sie den folgenden Code verwenden:

Diese Methode scrollt durch das Div, sodass sich das Zielelement genau oben befindet, oder scrollt so weit nach unten wie möglich, um innerhalb des Div sichtbar zu sein.

Das obige ist der detaillierte Inhalt vonWie scrolle ich in JavaScript zu Elementen innerhalb begrenzter Divs?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!