CSS scroll snap

Das CSS scroll snap Modul bietet Eigenschaften, die es Ihnen ermöglichen, das Scroll- und Schwenkverhalten durch die Definition von Schnappstellungen zu steuern. Inhalte können in Position „einrasten“, während der Benutzer überlaufende Inhalte innerhalb eines Scroll-Containers scrollt und dadurch für Seiteneinteilung und Scroll-Positionierung sorgt.

Dieses Modul enthält die Scroll-Container-Eigenschaften scroll-padding, um den optimalen Betrachtungsbereich während „scroll-into-view“-Operationen anzupassen. Es umfasst auch scroll-margin und scroll-alignment, die auf die Kinder des Scroll-Containers gesetzt werden, um den visuellen Bereich der Kinder anzupassen, wenn dieses Kind in den Sichtbereich gescrollt wird, sowie eine Eigenschaft, um das Scrollen auf einzelne Kinder zu stoppen.

Scroll snap in Aktion

Um das Scroll-Snapping im unten stehenden Feld zu sehen, scrollen Sie auf und ab sowie nach links und rechts durch das Raster von 45 nummerierten Kästchen im scrollbaren Ansichtsfenster. Klicken Sie auf „Abspielen“ im untenstehenden Beispiel, um den Quellcode zu sehen oder im MDN Playground zu bearbeiten:

const positions = ["start", "center", "end"];
const inlineDirection = document.getElementById("inline");
const blockDirection = document.getElementById("block");
const stop = document.getElementById("stop");
const snap = document.getElementById("snap");
const all = document.querySelector("article");
const rules = document.getElementById("css-output").sheet.cssRules;

setSST();
setSSA();

inlineDirection.addEventListener("change", () => {
  setSSA();
});
blockDirection.addEventListener("change", () => {
  setSSA();
});
stop.addEventListener("change", () => {
  setSST();
});
snap.addEventListener("change", () => {
  all.classList.toggle("snapDisabled");
});

function setSSA() {
  rules[0].style.scrollSnapAlign = `${positions[blockDirection.value]} ${
    positions[inlineDirection.value]
  }`;
}

function setSST() {
  if (stop.checked) {
    rules[0].style.scrollSnapStop = "always";
  } else {
    rules[0].style.scrollSnapStop = "normal";
  }
}

<article>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div>
    <fieldset>
      <legend>Change the options</legend>
      <p>
        <label
          ><input
            type="range"
            min="0"
            max="2"
            value="1"
            list="places"
            id="block" />
          block position</label
        >
      </p>
      <p>
        <label>
          <input
            type="range"
            min="0"
            max="2"
            value="1"
            list="places"
            id="inline" />
          inline position
        </label>
      </p>
      <p>
        <label>
          <input type="checkbox" id="stop" />
          Prevent scrolling past boxes
        </label>
      </p>
    </fieldset>

    <p>
      <label><input type="checkbox" id="snap" /> disable snapping</label>
    </p>

    <datalist id="places">
      <option value="0">start</option>
      <option value="1">center</option>
      <option value="2">end</option>
    </datalist>
  </div>
</article>

li {
  /*
  starts with:
      scroll-snap-align: center center;
      scroll-snap-stop: normal (defaults);

  CSS gets changed with JavaScript when you change the controls.
  the following can be set:
      scroll-snap-stop: always | normal;
      scroll-snap-align: start | center | end {2}
        */
}
ul {
  overflow: auto;
  scroll-snap-type: both mandatory;
  overscroll-behavior-x: contain;
}
article.snapDisabled fieldset {
  opacity: 20%;
  pointer-events: none;
}
article.snapDisabled ul {
  scroll-snap-type: initial;
  overscroll-behavior-x: initial;
}

@layer pageSetup {
  article {
    display: flex;
    gap: 2vw;
  }
  div {
    flex: 1;
  }
  ul {
    display: grid;
    gap: 6.25vw;
    padding: 12.5vw;
    box-sizing: border-box;
    border: 1px solid;
    grid-template-columns: repeat(5, 1fr);
    background: conic-gradient(
      at bottom left,
      red 0deg,
      yellow 15deg,
      green 30deg,
      blue 45deg,
      purple 60deg,
      magenta 75deg
    );
    background-attachment: local;
    margin: auto;
    width: 20vw;
    height: 20vw;
  }
  li {
    scroll-snap-align: center;
    height: 12.5vw;
    width: 12.5vw;
    outline: 3px inset;
    list-style-type: none;
    background: white;
    font-family: monospace;
    font-size: 3rem;
    line-height: 12vw;
    text-align: center;
    counter-increment: items 1;
  }
  li::after {
    content: counter(items);
  }
  input {
    vertical-align: bottom;
  }
  p {
    font-family: monospace;
  }
}

Mit Scroll-Snap wird eines der nummerierten Kästchen, zu dem Sie scrollen, in der Position einrasten. Das anfängliche CSS lässt das nummerierte Kästchen in der Mitte des Ansichtsfensters einrasten. Verwenden Sie die Schieberegler, um die Block- und Inline-Schnapppositionen zu ändern.

Durch die Verwendung von Schnappeigenschaften können Sie das Vorbeiscrollen an einem Element, in diesem Fall einem nummerierten Kästchen, gestatten oder blockieren. Wählen Sie die Checkbox „Vorbeiscrollen an Kästchen verhindern“ aus, um alle Scrollaktionen auf das Scrollen zu einem benachbarten Kästchen zu beschränken.

Um Scroll-Snapping mit regulärem Scrollen zu vergleichen, aktivieren Sie die Checkbox „Snapping deaktivieren“ und versuchen Sie erneut zu scrollen.

scrollsnapchange Experimentell
scrollsnapchanging Experimentell

Schnittstellen

SnapEvent Experimentell
- SnapEvent.snapTargetBlock Experimentell
- SnapEvent.snapTargetInline Experimentell

Leitfäden

Grundlegende Konzepte von CSS scroll snap: Ein Überblick und Beispiele zu den Funktionen von CSS scroll snap.
Verwendung von Scroll-Snap-Ereignissen: Ein Leitfaden zur Verwendung der scrollsnapchanging und scrollsnapchange Scroll-Snap-Ereignisse, die ausgelöst werden, wenn der Browser feststellt, dass ein neues Schnappziel ansteht oder ausgewählt wurde.