Nach Klick sollte verlinktes Element im Zentrum des Fensters sein

[Linuchs]

Moin,

in meinem Geneology-Projekt habe ich eine HTML-Tabelle aller Personen mit z.B. <tr id=id125>

Wenn ich nun auf eine Zeile verlinke, wird sie am oberen Fensterrand dargestellt, verdeckt von dem sticky thead. Gibt es eine Möglichkeit, die top-Positionierung der Zeile zu beeinflussen?

Bei z.B. Kapitelüberschriften auf Textseiten kann man das mit padding-top, aber dann ist auch im Fließtext ein Leerbereich darüber, in der Tabelle würde es es Leerzeilen ergeben.

---

Die grafische Darstellung ist eine eigene Idee. Oben ein horizontaler Zeitstrahl von 1750 bis 2040. Jede Person wird als Rechteck eingetragen das links mit dem Geburtsjahr beginnt und rechts mit dem Sterbejahr endet. Wer noch lebt, grenzt rechts an das aktuelle Jahr.

Damit sich nichts überlappt, sind alle Rechtecke vertikal untereinander, links / rechts nach Lebenszeit versetzt. Das Fenster zeigt nur einen Teibereich der Rechtecke, in allen vier Richtungen können weitere außerhalb des Fensters sein.

So ist nicht nur zu erkennen, wer zeitgleich gelebt hart, also sich kennen könnte, sondern ein senkrechter Pfeil (SVG) zeigt vom Geburtsjahr auf Mutter und Vater und trifft dort auf deren Alter bei der Geburt dieses Kindes.

Wenn ich in der Grafik auf eine Person (Rechteck) verlinke, hätte ich sie gerne im Zentrum des Fensters, also nicht nur Y, sondern auch X entsprechend eingerückt. Geht mit Javascript, aber vielleicht auch einfacher?

Die mm der Einrückung ist ja bekannt, wer 1821 geboren ist, rückt 142 mm von links ein. Jedes Jahrzehnt belegt 20 mm seit 1750.

Gruß, Linuchs

[Gunnar Bittersmann]

@@Linuchs

in meinem Geneology-Projekt habe ich eine HTML-Tabelle aller Personen mit z.B. <tr id=id125>

Wenn ich nun auf eine Zeile verlinke, wird sie am oberen Fensterrand dargestellt, verdeckt von dem sticky thead. Gibt es eine Möglichkeit, die top-Positionierung der Zeile zu beeinflussen?

Ja, scroll-padding-top ist dein Freund.

Die Höhe des Headers kannst du i.a.R. aber nicht kennen, du musst sie also mit JavaScript auslesen. Die Höhe des Headers kann sich beim Ändern der Fenstergröße ändern (Menü braucht bspw. unterschiedlich viele Zeilen), da bietet sich ein ResizeObserver an.

Da man am besten CSS-Eigenschaften nicht mit JavaScript direkt ändert, bietet es sich an, eine custom property zur Datenübergabe zu nutzen. So wie in diesem Posting ganz unten.

Im Stylesheet steht dann bei mir

html {
	scroll-padding-top: var(--header-height);
	overflow: auto;
}

Beispiel: Tribbles ganz oben.

(Wenn man auf der Seite ist, nochmal refreshen. Das JavaScript muss ja erst durchlaufen, bevor der interne Anker angesprungen wird.)

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Gunnar Bittersmann

(Wenn man auf der Seite ist, nochmal refreshen. Das JavaScript muss ja erst durchlaufen, bevor der interne Anker angesprungen wird.)

Nicht mehr nötig. Ich hab da mal

window.setTimeout(() => {
	if (location.hash) {
		document.querySelector(location.hash).scrollIntoView();
	}
}, 0);

ergänzt, damit nach dem Initialisieren des ResizeObservers zu dem internen Anker gescrollt wird.

window.setTimeout() scheint nötig zu sein; mit window.requestAnimationFrame() geht’s (zumindest im Firefox) nicht.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

Ja, scroll-padding-top ist dein Freund.

Dieser Freund war bei mir völlig indifferent.

Nach etwas Lektüre habe ich gelernt, dass er im Rahmen von Scroll-Snapping relevant sein soll und sonst nicht.

Ich hab dann eine kleine genealogische Spielwiese gebaut, aber Scroll-Snapping war dort völlig wirkungslos. Ich würde mutmaßen, dass scroll-snapping für absolut positionierte Kind-Elemente ignoriert wird?

Oder?

Guckst Du

Rolf

[Gunnar Bittersmann]

@@Rolf B

Ja, scroll-padding-top ist dein Freund.

Dieser Freund war bei mir völlig indifferent.

Nach etwas Lektüre habe ich gelernt, dass er im Rahmen von Scroll-Snapping relevant sein soll und sonst nicht.

Quelle? Weder MDN noch die Spec sagen so etwas.

Im Gegenteil: “This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars)”

Ich hab dann eine kleine genealogische Spielwiese gebaut, aber Scroll-Snapping war dort völlig wirkungslos.

Was erwartest du? Was passiert stattdessen?

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

Quelle?

MDN und die Spec.

Weder MDN noch die Spec sagen so etwas.

Doch. Sie sagten mit beim Lesen GENAU das. Beide reden von scroll-padding immer nur im Zusammenhang mit Snapping, und alle Beispiele verwenden scroll-snap-type.

This property specifies (for all scroll containers, not just scroll snap containers)

Verdammt…

Was erwartest du?

Dass eine Personen-Box in den Viewport geschoben wird, wenn sie halb hinaus hängt.

Was passiert stattdessen?

NICHTS. Die Seite verhält sich gleich, egal ob die Eigenschaft da ist oder nicht.

Was habe ich falsch gemacht?

Ich hatte scroll-padding-top auf das body Element gesetzt, das ist aber nicht der scroll-container, sondern das html Element. Grmpf.

Und dann geht es.

Eleganterweise macht man den header auch noch sticky, nicht fixed - muss dann aber um die absoluten Personenboxen noch einen Container legen, der hoch genug ist, um alle Boxen einzuschließen.

Scroll-Snapping krieg ich aber nicht hin. Also so, dass eine Personenbox in den sichtbaren Bereich zurückgeschoben wird, wenn man sie halb hinaus hängt. So wie in den Beispielen. Guck mal: https://jsfiddle.net/Rolf_b/L8qorx47/

Rolf

[Gunnar Bittersmann]

@@Rolf B

Doch. Sie sagten mit beim Lesen GENAU das. Beide reden von scroll-padding immer nur im Zusammenhang mit Snapping, und alle Beispiele verwenden scroll-snap-type.

Du musst das „GENAU“ vors „Lesen“ tun. 😏

This property specifies (for all scroll containers, not just scroll snap containers)

Verdammt…

Siehste!

🖖 Живіть довго і процвітайте

[Felix Riesterer]

Lieber Linuchs,

Geneology-Projekt

was soll das sein? meinst Du Genealogy?

Liebe Grüße

Felix Riesterer

[MudGuard]

Hi,

Geneology-Projekt

was soll das sein?

Ein Dreckfuhler, a/k/a Teppfihler.

cu,
Andreas a/k/a MudGuard

[Der Martin]

Hallo Felix,

Geneology-Projekt

was soll das sein?

halb so wild - ich habe das auch schon als Genialogie geschrieben gesehen. 😉

meinst Du Genealogy?

Huch, was ist mit LEO los? Weißer Adler auf weißem Grund?

Einen schönen Tag noch
 Martin

[MudGuard]

Hi,

meinst Du Genealogy?

Huch, was ist mit LEO los? Weißer Adler auf weißem Grund?

bei mir ganz normal …

cu,
Andreas a/k/a MudGuard