CSS scroll snap

Das CSS scroll snap Modul bietet Eigenschaften, mit denen Sie das Schwenk- und Scrollverhalten durch Festlegen von Schnapp-Positionen steuern können. Der Inhalt kann in die entsprechende Position geschnappt werden, während der Benutzer überlaufenden Inhalt in einem scroll container scrollt, was eine Paginierung und Scroll-Positionierung ermöglicht.

Dieses Modul umfasst die scroll-padding Eigenschaften des scroll container, um den optimalen Betrachtungsbereich beim Scrollen in den Ansichtsmodus anzupassen. Es beinhaltet auch scroll-margin und scroll-alignment, die auf die Kinder des scroll container gesetzt werden, um den visuellen Bereich der Kinder anzupassen, wenn dieses Kind in die Ansicht gescrollt wird, sowie eine Eigenschaft, um das Scrollen bei einzelnen Kindern zu erzwingen.

Scroll snap in Aktion

Um das Scrollen in der Box unten im Einsatz zu sehen, scrollen Sie durch das Raster aus 45 nummerierten Boxen im scrollbaren Viewport nach oben und unten sowie nach links und rechts. Klicken Sie auf "Play" im Beispiel unten, um den Quellcode 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 eine der nummerierten Boxen, zu der Sie scrollen, an ihrer Position einrasten. Das anfängliche CSS lässt die nummerierte Box in die Mitte des Viewports einrasten. Nutzen Sie die Schieberegler, um die Block- und Inline-Schnapp-Positionen zu ändern.

Durch die Verwendung von Schnappeigenschaften können Sie das Scrollen über ein Element, in diesem Fall eine nummerierte Box, erlauben oder blockieren. Wählen Sie das Kontrollkästchen "Scrollen über Boxen verhindern", um alle Scrollaktionen auf das Scrollen zu einer angrenzenden Box zu beschränken.

Um das Scrollen mit Einrasten mit dem normalen Scrollen zu vergleichen, aktivieren Sie das Kontrollkästchen "Einrasten 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 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 Schnappziel ansteht oder ausgewählt wurde.

Spezifikationen

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

Siehe auch

CSS overflow Modul
CSS scrollbars styling Modul
Nur mit der Tastatur scrollbare Bereiche 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