Wie kann ich ein Div automatisch zu einem bestimmten Element darin scrollen, ohne die gesamte Seite zu scrollen?

Scrollen zu einem Element innerhalb eines Div

Sie möchten ein gescrolltes Div so programmieren, dass es beim Klicken automatisch zu einem Element darin scrollt. Die Verwendung von scrollIntoView(true) scheint die gesamte Seite zu scrollen, was Sie verwirrt.

Lösung:

Um dieses Problem zu beheben, müssen Sie den oberen Versatz der Seite bestimmen Zielelement relativ zu seinem übergeordneten Element, dem scrollenden Div-Container. Dies wird erreicht durch:

<code class="js">var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;</code>

TopPos enthält jetzt den Pixelabstand zwischen der Oberseite des Divs und dem Element, das sichtbar sein soll.

Als nächstes weisen Sie das Div mit scrollTop an, zu dieser Position zu scrollen :

<code class="js">document.getElementById('scrolling_div').scrollTop = topPos;</code>

In Prototype JS bedeutet dies:

<code class="js">var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];</code>

Diese Aktion scrollt das Div, um das angegebene Element oben auszurichten, oder so nah wie möglich, wenn das Scrollen nicht funktioniert. Es ist nicht möglich, den Gipfel zu erreichen.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Div automatisch zu einem bestimmten Element darin scrollen, ohne die gesamte Seite zu scrollen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!