Scroll snap og custom commands

Scroll snap som grundlag

Scrolling Container-opgaven samler flere kendte teknikker. Start med en liste, der kan scrolles naturligt, før du tilføjer knapper. Scroll snap beskriver, hvor elementerne bør lande efter en scrollbevægelse:

.scroll-container {
  display: flex;
  gap: 1rem;
  overflow-inline: auto;
  scroll-snap-type: inline mandatory;
}

.scroll-container > * {
  flex: 0 0 min(85%, 24rem);
  scroll-snap-align: start;
}

Containeren aktiverer snap; børnene angiver snap-punkterne. mandatory tvinger snapping, mens proximity giver browseren mere frihed. Test med forskelligt indhold og forskellige bredder. scroll-padding-inline flytter snap-området indad uden at tilføje fysisk padding.

Steps-udgaven går fra en scrollbar række til justeret snapping. Prøv at ændre én egenskab ad gangen: akse, start/center, scroll-padding og scroll-snap-stop.

Indbyggede invoker commands

HTML kan forbinde en knap med et mål via commandfor, som peger på målets id:

<button type="button" command="toggle-popover" commandfor="info">
  Vis information
</button>
<div popover id="info">Ekstra information</div>

Browseren kender handlingen toggle-popover. Det kræver ikke din egen click-handler. Brug en rigtig knap med et tydeligt navn.

Custom commands har en handler

Brugerdefinerede commands starter med --, fx --increment og --decrement. Browseren sender et command-event til målet, men du skal selv implementere handlingen i JavaScript. Lyt direkte på målet; eventet bobler ikke.

I denne øvelse reagerer et number-input med stepUp() eller stepDown(). Læg mærke til, at knappen ved minimum også skal have den rigtige disabled-tilstand.

Send en værdi med handlingen

Flere knapper kan dele command-navnet og sende forskellige værdier med value. event.source er knappen, som udløste handlingen; event.target er målelementet. value er en streng, så konvertér den med Number(), når du skal regne med den.

Scroll med en custom command

<button type="button" value="-0.9" command="--scroll" commandfor="scroller">
  Forrige
</button>
<button type="button" value="0.9" command="--scroll" commandfor="scroller">
  Næste
</button>

const scroller = document.querySelector('#scroller');

function scrollByFactor(value) {
  const factor = Number(value);
  if (!Number.isFinite(factor)) return;
  scroller.scrollBy({ left: scroller.clientWidth * factor });
}

scroller.addEventListener('command', (event) => {
  if (event.command === '--scroll') {
    scrollByFactor(event.source.value);
  }
});

Eksemplet antager vandret scroll i venstre-mod-højre-retning. Knapperne flytter listen med 90 % af dens synlige indre bredde; snap bestemmer det endelige stop. Det er ikke nødvendigvis præcis ét kort. clientWidth udelader border og en eventuel lodret scrollbar, mens slidets offsetWidth inkluderer dem.

Deaktivér knapper ved kanterne

const prev = document.querySelector('[commandfor="scroller"][value="-0.9"]');
const next = document.querySelector('[commandfor="scroller"][value="0.9"]');

function updateButtons() {
  const maxScroll = scroller.scrollWidth - scroller.clientWidth;
  prev.disabled = scroller.scrollLeft <= 1;
  next.disabled = scroller.scrollLeft >= maxScroll - 1;
}

scroller.addEventListener('scroll', updateButtons);
new ResizeObserver(updateButtons).observe(scroller);
updateButtons();

scrollWidth er hele indholdets bredde, og clientWidth er det synlige område. Tolerancen tager højde for afrunding. Kald også funktionen efter dynamiske indholdsændringer, som ændrer scrollbredden uden at ændre containerens størrelse. Brug rigtig disabled, ikke kun en grå farve.

Læs mere om Invoker Commands API.