CSS Scroll Snap

Das CSS Scroll Snap Modul bietet Eigenschaften, die es Ihnen ermöglichen, das Verhalten beim Schwenken und Scrollen durch Definieren von Snap-Positionen zu kontrollieren. Inhalte können in Position geschnappt werden, wenn der Benutzer innerhalb eines Scroll-Containers durch überlaufende Inhalte scrollt, was Paginierung und Scroll-Positionierung ermöglicht.

Dieses Modul umfasst die "scroll-padding"-Eigenschaften des Scroll-Containers, um den optimalen Betrachtungsbereich während der "Scroll-into-View"-Operationen anzupassen. Es enthält auch "scroll-margin" und "scroll-alignment", die auf die Kinder des Scroll-Containers eingestellt werden, um den visuellen Bereich der Kinder anzupassen, wenn dieses Kind in den Sichtbereich gescrollt wird, sowie eine Eigenschaft, um das Scrollen bei einzelnen Kindern zu erzwingen.

Scroll Snap in Aktion

Um das Scroll Snap im Feld unten zu erleben, scrollen Sie nach oben und unten sowie nach links und rechts durch das Gitter von 45 nummerierten Feldern im scrollbaren Ansichtsfenster. Klicken Sie auf "Play" im folgenden Beispiel, um den Quellcode im MDN Playground zu betrachten oder 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 page-setup {
  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 dem Scroll Snap wird eines der nummerierten Felder, zu dem Sie scrollen, in Position geschnappt. Das anfängliche CSS lässt das nummerierte Feld in die Mitte des Ansichtsfensters schnappen. Verwenden Sie die Schieberegler, um die Block- und Inline-Snap-Positionen zu ändern.

Mithilfe von Snap-Eigenschaften können Sie erlauben oder verhindern, dass über ein Element hinaus gescrollt wird, in diesem Fall ein nummeriertes Feld. Wählen Sie das Kontrollkästchen "Scrolling über Kästchen verhindern", um zu erzwingen, dass alle Scroll-Vorgänge auf das Scrollen zu einem benachbarten Kästchen beschränkt sind.

Um Scroll Snap mit normalem Scrollen zu vergleichen, aktivieren Sie das Kontrollkästchen "Snapping deaktivieren" und versuchen Sie erneut zu scrollen.

SnapEvent
- SnapEvent.snapTargetBlock
- SnapEvent.snapTargetInline

Leitfäden

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