Fixer Menübalken über der Seite

[Gunnar Bittersmann]

@@Gunnar Bittersmann

weil es nicht nur Bereiche geht, die als seiteninterner Anker angesprungen werden können

Aber auch um diese. Die sollten auch in den sichtbaren Bereich gescrollt werden:

	window.addEventListener('hashchange', event => {
		if (location.hash)
		{
			const targetElement = document.querySelector(location.hash);
			
			if (targetElement)
			{
				targetElement.scrollIntoRestrictedView();
			}
		}
	});

Oder gehört die Abfrage, ob scrollIntoRestrictedView() auf einem Element aufgerufen wird, besser in die Methode selbst rein?

sondern um sämtliche interaktiven Elemente.

Damit das main-Element (das durch einen Skip-Link angesprungen werden kann), beim Draufclicken nicht rumspringt, wäre da zu ergänzen:

	document.documentElement.addEventListener('focusin', event => {
		if (event.target.tagName != 'MAIN')
		{
			event.target.scrollIntoRestrictedView();
		}
	});

LLAP 🖖