De browser schuift een onderdeel net binnen beeld zodra het de focus krijgt. Hij houdt daarbij geen rekening met een balk die eroverheen ligt, want die kent hij niet. Met scroll-margin geef je die ruimte op.
:where(a, button, input, select, textarea, summary, [tabindex]) {
scroll-margin-block-start: 120px; /* de hoogte van de koptekst */
scroll-margin-block-end: 90px; /* wat er onderaan blijft staan */
}Zet de bovenwaarde op de hoogte van de koptekst en de onderwaarde op wat er onderaan blijft staan. Verschilt die hoogte per schermbreedte, zet hem dan in een variabele.
Dit werkt alleen als de browser moet scrollen. Staat het onderdeel al in beeld en valt er toevallig een chatknop overheen, dan gebeurt er niets. Laat zo’n knop dan wijken zodra er iets de focus heeft, en zorg dat de knop daarna nog bereikbaar blijft.
body:has(:focus-visible) .chatknop {
opacity: 0;
pointer-events: none;
}De eenvoudigste oplossing is een balk die niet meescrolt. Een koptekst die gewoon bovenaan de pagina staat kan per definitie niets bedekken, en kost geen onderhoud.