{"id":281999,"date":"2019-02-04T08:15:29","date_gmt":"2019-02-04T15:15:29","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=281999"},"modified":"2019-05-29T07:31:37","modified_gmt":"2019-05-29T14:31:37","slug":"scroll-snap-type","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-snap-type\/","title":{"rendered":"scroll-snap-type"},"content":{"rendered":"

The scroll-snap-type<\/code> property is part of the CSS Scroll Snap Module<\/a>. Scroll snapping refers to "locking" the position of the viewport to specific elements on the page as the window (or a scrollable container) is scrolled. Think of it like putting a magnet on top of an element that sticks to the top of the viewport and forces the page to stop scrolling right there.<\/p>\n

This is useful if you want to stop the browser at specific points on the page. For example: A user browsing a photo gallery probably doesn’t want to scroll halfway past an image — they’d likely prefer to have the image “snap” to the right position as they scroll. Scroll snapping gives developers a pure-CSS way to handle this behavior.<\/p>\n

<\/p>\n

scroll-snap-type<\/code> is a required property on any scrollable container you want to add scroll snapping to. It answers three questions for a scroll container:<\/p>\n

    \n
  1. Does the container use scroll snapping?<\/li>\n
  2. On which axis — x (horizontal), y (vertical), block, or inline — should scroll snapping apply?<\/li>\n
  3. How should scroll snapping behave? Is it forced 100% of the time, or does it take effect only when the user gets “close enough” to a snap position? More on this later.<\/li>\n<\/ol>\n
    .scroll-container {\r\n  \/* Always force (mandatory) scrolling to a snap point on the y-axis *\/\r\n  scroll-snap-type: y mandatory;\r\n}<\/code><\/pre>\n
    Syntax<\/h3>\n
    scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]<\/code><\/pre>\n
    Values<\/h3>\n
    scroll-snap-type<\/code> accepts the following values:<\/p>\n