scrollIntoView Scrollt einfach zu weit

Question 1

Ich habe eine Seite, auf der eine Bildlaufleiste mit Tabellenzeilen mit divs darin dynamisch aus der Datenbank generiert wird. Jede Tabellenzeile verhält sich wie ein Link, ähnlich wie Sie es auf einer YouTube-Playlist neben dem Videoplayer sehen würden.

Wenn ein Benutzer die Seite besucht, soll die Option, auf der er sich befindet, an den Anfang des scrollenden Div gehen. Diese Funktionalität funktioniert. Das Problem ist, dass es nur ein bisschen zu weit geht. Als ob die Option, auf der sie sich befinden, etwa 10 Pixel zu hoch ist. Wenn also die Seite besucht wird, wird die URL verwendet, um zu identifizieren, welche Option ausgewählt wurde, und diese Option wird dann an den Anfang des scrollenden Div gescrollt. Hinweis: Dies ist nicht die Bildlaufleiste für das Fenster, sondern ein div mit einer Bildlaufleiste.

Ich verwende diesen Code, um die ausgewählte Option an den Anfang des div zu verschieben:

var pathArray = window.location.pathname.split( "https://stackoverflow.com/" );

var el = document.getElementById(pathArray[5]);

el.scrollIntoView(true);

Es verschiebt es an die Spitze des div, aber etwa 10 Pixel zu weit nach oben. Weiß jemand, wie man das beheben kann?

Question 2

Reibungsloses Scrollen zur richtigen Position (veraltet)

Dort ist der bessere Antwort was nutzt Scroll-Rand und Scroll-Padding CSS-Regeln. getBoundingClientRect in dieser Lösung löst ein zusätzliches erzwungenes Layout aus und kann unnötige Leistungsprobleme verursachen.

Erhalten Korrekt y koordinieren und nutzen window.scrollTo({top: y, behavior: 'smooth'})

const id = 'profilePhoto';
const yOffset = -10; 
const element = document.getElementById(id);
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;

window.scrollTo({top: y, behavior: 'smooth'});

Question 3

Positionieren Sie den Anker nach der absoluten Methode

Eine andere Möglichkeit, dies zu tun, besteht darin, Ihre Anker genau an der gewünschten Stelle auf der Seite zu positionieren, anstatt sich auf das Scrollen nach Offset zu verlassen. Ich finde, dass es eine bessere Kontrolle für jedes Element ermöglicht (z. B. wenn Sie einen anderen Offset für bestimmte Elemente wünschen) und möglicherweise auch widerstandsfähiger gegen Änderungen/Unterschiede der Browser-API ist.

<div id="title-element" style="position: relative;">
  <div id="anchor-name" style="position: absolute; top: -100px; left: 0"></div>
</div>

Nun wird der Offset relativ zum Element mit -100px angegeben. Erstellen Sie eine Funktion, um diesen Anker für die Wiederverwendung von Code zu erstellen, oder wenn Sie ein modernes JS-Framework wie React verwenden, erstellen Sie dazu eine Komponente, die Ihren Anker rendert, und übergeben Sie den Ankernamen und die Ausrichtung für jedes Element, das möglicherweise oder möglicherweise nicht gleich sein.

Dann verwende einfach:

const element = document.getElementById('anchor-name')
element.scrollIntoView({ behavior: 'smooth', block: 'start' });

Für flüssiges Scrollen mit einem Versatz von 100px.

Question 4

Sie können es in zwei Schritten tun:

el.scrollIntoView(true);
window.scrollBy(0, -10); // Adjust scrolling with a negative value here

Question 5

Wenn es um 10 Pixel geht, könnten Sie den Inhalt einfach manuell anpassen div‘s Scroll-Offset so:

el.scrollIntoView(true);
document.getElementById("containingDiv").scrollTop -= 10;

Question 6

Ich habe dieses Problem gelöst, indem ich verwendet habe,

element.scrollIntoView({ behavior: 'smooth', block: 'center' });

Dadurch erscheint das Element in der center nach dem Scrollen, damit ich nicht rechnen muss yOffset.

Ich hoffe es hilft…

Question 7

CSS `scroll-margin` und `scroll-padding`

Vielleicht möchten Sie einen Blick auf neue CSS-Eigenschaften werfen scroll-padding und scroll-margin. Sie können verwenden scroll-padding für den scrollenden Container (html in diesem Fall) und scroll-margin für das Element innerhalb des Containers.

Für Ihr Beispiel möchten Sie hinzufügen scroll-margin-top für das Element, das Sie anzeigen möchten, wie folgt:

.example {
  scroll-margin-top: 10px;
}

Dies wirkt sich aus scrollIntoView Code, wie dieser Code:

const el = document.querySelector(".example");
el.scrollIntoView({block: "start", behavior: "smooth"});

Dadurch wird das Ansichtsfenster gescrollt, um den oberen Rand des Ansichtsfensters mit dem oberen Rand des Elements auszurichten, jedoch mit 10 Pixel zusätzlichem Platz. Mit anderen Worten, diese Eigenschaften des Elements werden berücksichtigt:

padding-top

border-top
scroll-margin-top
(und nicht margin-top)

Außerdem, wenn die html Element hat scroll-padding-top gesetzt, dann wird auch das berücksichtigt.

Question 8

Dies funktioniert für mich in Chrome (mit reibungslosem Scrollen und ohne Timing-Hacks)

Es bewegt nur das Element, initiiert den Bildlauf und bewegt es dann zurück.

Es gibt kein sichtbares “Popping”, wenn sich das Element bereits auf dem Bildschirm befindet.

pos = targetEle.style.position;
top = targetEle.style.top;
targetEle.style.position = 'relative';
targetEle.style.top = '-20px';
targetEle.scrollIntoView({behavior: 'smooth', block: 'start'});
targetEle.style.top = top;
targetEle.style.position = pos;

Reibungsloses Scrollen zur richtigen Position (veraltet)

Positionieren Sie den Anker nach der absoluten Methode

CSS scroll-margin und scroll-padding

CSS `scroll-margin` und `scroll-padding`