CSS scroll snap

Das CSS scroll snap-Modul bietet Eigenschaften, mit denen Sie das Schwenk- und Scrollverhalten steuern können, indem Sie Schnapppositionen definieren. Inhalte können beim Scrollen durch überflutete Inhalte innerhalb eines Scroll-Containers in Position geschnappt werden, wodurch ein Seitenumbruch und eine Scrollpositionierung ermöglicht werden.

Dieses Modul umfasst die Scroll-Container-Eigenschaften scroll-padding, um den optimalen Anzeigebereich beim Scrollen in den Ansichtsoperationen anzupassen. Es enthält auch scroll-margin und scroll-alignment, die auf die Kinder eines Scroll-Containers gesetzt werden, um den visuellen Bereich der Kinder anzupassen, wenn dieses Kind in den Ansichtsbereich gescrollt wird, sowie eine Eigenschaft, um das Scrollen an einzelnen Kindern zu stoppen.

Scroll snap in Aktion

Um das Scroll-Snapping im folgenden Kasten zu sehen, scrollen Sie nach oben und unten sowie nach links und rechts durch das Raster der 45 nummerierten Kästchen im scrollbaren Ansichtsfenster. Klicken Sie auf "Abspielen" im folgenden Beispiel, um die Quelle im MDN Playground anzusehen 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.styleSheets[0].cssRules;

inlineDirection.addEventListener("change", () => {
  setSSA();
});
blockDirection.addEventListener("change", () => {
  setSSA();
});
stop.addEventListener("change", () => {
  setSST();
});
window.addEventListener("load", () => {
  setSST();
  setSSA();
});
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 den Mittelpunkt geschoben. Das anfängliche CSS lässt das nummerierte Kästchen in die Mitte des Ansichtsfensters schnappen. Verwenden Sie die Schieberegler, um die block- und inline-Schnapppositionen zu ändern.

Mit den Snap-Eigenschaften können Sie das Scrollen über ein Element hinaus erlauben oder blockieren, in diesem Fall ein nummeriertes Kästchen. Wählen Sie das Kontrollkästchen "Verhindern, dass über Kästen gescrollt wird", um alle Scrollaktionen auf das Scrollen zu einem angrenzenden Kasten zu begrenzen.

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

scrollsnapchange Experimentell
scrollsnapchanging Experimentell

Schnittstellen

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

Leitfäden

Grundlagen von CSS scroll snap: Ein Überblick und Beispiele der 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 ein neues Schnappziel voraussieht oder auswählt.

Spezifikationen

Specification
CSS Scroll Snap Module Level 1
CSS Scroll Snap Module Level 2

Siehe auch

CSS Overflow Modul
CSS Scrollbars Styling Modul
Nur Keyboard-Scrollbereiche auf adrianroselli.com (2022)
Scroll Snap Beispiele auf CodePen (2022)
Gut kontrolliertes Scrollen mit CSS Scroll Snap auf web.dev (2021)
Praktisches CSS Scroll Snapping auf CSS-Tricks (2020)
CSS scroll snap auf 12 Days of Web (2019)

CSS scroll snap

Scroll snap in Aktion

Referenz

Eigenschaften auf Containern

Eigenschaften auf Kindern

Ereignisse

Schnittstellen

Leitfäden

Verwandte Konzepte

Spezifikationen

Siehe auch