Skip to main content

CSS scroll snap

The CSS scroll snap module provides properties that let you control the panning and scrolling behavior by defining snap positions. Content can be snapped into position as the user scrolls overflowing content within a {{Glossary("scroll container")}}, providing paging and scroll positioning.

This module includes the scroll container scroll-padding properties to adjust the optimal viewing region of paging during scroll-into-view operations. It also includes scroll-margin and scroll-alignment, set on the scroll container's children, to adjust the children's visual area when that child is scrolled into view, as well as a property to force scrolling to stop on individual children.

Scroll snap in action​

To view scroll snapping in the box below, scroll up-and-down and left-and-right through the grid of 45 numbered boxes in the scrollable viewport.

{{EmbedGHLiveSample("css-examples/modules/scroll_snap.html", '100%', 250)}}

With scroll snap, one of the numbered boxes that you scroll to will snap into place. The initial CSS makes the numbered box snap into the center of the viewport. Use the sliders to change the block and inline snap positions.

Using snap properties, you can allow or block the scrolling past an element, a numbered box in this case. Select the "Prevent scrolling past boxes" checkbox to force all scrolling actions to be limited to scrolling to an adjacent box.

To compare scroll snapping to regular scrolling, check the "disable snapping" checkbox and try scrolling again.

To see the code for this example, view the source on GitHub.

Reference​

Properties on containers​

  • {{cssxref("scroll-snap-type")}}
  • {{cssxref("scroll-padding")}}
    • {{cssxref("scroll-padding-top")}}
    • {{cssxref("scroll-padding-right")}}
    • {{cssxref("scroll-padding-bottom")}}
    • {{cssxref("scroll-padding-left")}}
    • {{cssxref("scroll-padding-inline")}}
    • {{cssxref("scroll-padding-inline-start")}}
    • {{cssxref("scroll-padding-inline-end")}}
    • {{cssxref("scroll-padding-block")}}
    • {{cssxref("scroll-padding-block-start")}}
    • {{cssxref("scroll-padding-block-end")}}

Properties on children​

  • {{cssxref("scroll-snap-align")}}
  • {{cssxref("scroll-margin")}}
    • {{cssxref("scroll-margin-top")}}
    • {{cssxref("scroll-margin-right")}}
    • {{cssxref("scroll-margin-bottom")}}
    • {{cssxref("scroll-margin-left")}}
    • {{cssxref("scroll-margin-inline")}}
    • {{cssxref("scroll-margin-inline-start")}}
    • {{cssxref("scroll-margin-inline-end")}}
    • {{cssxref("scroll-margin-block")}}
    • {{cssxref("scroll-margin-block-start")}}
    • {{cssxref("scroll-margin-block-end")}}
  • {{cssxref("scroll-snap-stop")}}

Guides​

  • {{cssxref(":target")}} pseudo-class
  • {{cssxref("overflow")}} CSS property
  • Element {{domxref("Element.scroll", "scroll()")}} method
  • Element {{domxref("Element.scrollBy", "scrollBy()")}} method
  • Element {{domxref("Element.scrollIntoView", "scrollIntoView()")}} method
  • Element {{domxref("Element.scrollTo", "scrollTo()")}} method
  • Document {{domxref("Document.scroll_event", "scroll")}} event
  • scrollbar ARIA role
  • {{Glossary("Scroll container")}} glossary term

Specifications​

See also​