{"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":"<p>The <code>scroll-snap-type<\/code> property is part of the <a href=\"https:\/\/www.w3.org\/TR\/css-scroll-snap-1\/\" rel=\"noopener\">CSS Scroll Snap Module<\/a>. Scroll snapping refers to &quot;locking&quot; 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<p>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&#8217;t want to scroll halfway past an image &mdash; they&#8217;d likely prefer to have the image &#8220;snap&#8221; to the right position as they scroll. Scroll snapping gives developers a pure-CSS way to handle this behavior.<\/p>\n<p><!--more--><\/p>\n<p><code>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<ol>\n<li>Does the container use scroll snapping?<\/li>\n<li>On which axis &mdash; x (horizontal), y (vertical), block, or inline &mdash; should scroll snapping apply?<\/li>\n<li>How should scroll snapping behave? Is it forced 100% of the time, or does it take effect only when the user gets &#8220;close enough&#8221; to a snap position? More on this later.<\/li>\n<\/ol>\n<pre rel=\"CSS\" class=\"language-css\"><code class=\"language-css\">.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<h3>Syntax<\/h3>\n<pre rel=\"CSS\" class=\"language-css\"><code class=\"language-css\">scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]<\/code><\/pre>\n<h3>Values<\/h3>\n<p><code>scroll-snap-type<\/code> accepts the following values:<\/p>\n<ul>\n<li><code>none<\/code> disables scroll snapping.<\/li>\n<li><code>x<\/code> enables scroll snapping along the x-axis only.<\/li>\n<li><code>y<\/code> enables scroll snapping along the y-axis only.<\/li>\n<li><code>block<\/code> enables scroll snapping along the block-axis only.<\/li>\n<li><code>inline<\/code> enables scroll snapping along the inline-axis only.<\/li>\n<li><code>both<\/code> enables scroll snapping along both axes (which you can think of as <code>x<\/code> <em>and<\/em> <code>y<\/code>, or <code>inline<\/code> <em>and<\/em> <code>block<\/code>.<\/li>\n<li><code>mandatory<\/code> is a strictness value which tells the browser to <em>always<\/em> go to a snap position when there isn&#8217;t scrolling happening.<\/li>\n<li><code>proximity<\/code> is a strictness value which tells the browser to go to a snap position if a scrolling action gets <em>pretty close<\/em> to a snap position. If it&#8217;s not <em>pretty close,<\/em> then the browser shouldn&#8217;t snap and scrolling will behave normally.<\/li>\n<\/ul>\n<h3>Example<\/h3>\n<p data-height=\"425\" style=\"height: 425px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"omLOqZ\" data-default-tab=\"result\" data-user=\"css-tricks\" data-pen-title=\"scroll-snap-type example\n\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/andyadams\/pen\/omLOqZ\" rel=\"noopener\">scroll-snap-type example<br \/>\n<\/a> by CSS-Tricks (<a href=\"https:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-snappoints\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">69<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">68<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"IE - \"><span class=\"caniuse-agents-version version\">11*<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">79<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">11<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">11.0-11.2<\/span><\/td><\/tr><\/table><\/div><\/div>\n<h3>Related<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-padding\/\"><code>scroll-padding<\/code><\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-margin\/\"><code>scroll-margin<\/code><\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-snap-align\/\"><code>scroll-snap-align<\/code><\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-snap-stop\/\"><code>scroll-snap-stop<\/code><\/a><\/li>\n<\/ul>\n<h3>Resources<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/TR\/css-scroll-snap-1\/\" rel=\"noopener\">CSS Scroll Snap W3C Candidate Recommendation<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/practical-css-scroll-snapping\/\">Practical CSS Scroll Snapping<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/introducing-css-scroll-snap-points\/\">Introducing CSS Scroll Snap Points<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The scroll-snap-type property is part of the CSS Scroll Snap Module. Scroll snapping refers to &quot;locking&quot; 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 [&hellip;]<\/p>\n","protected":false},"author":223334,"featured_media":282232,"parent":13947,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":283331,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-snap-stop\/","url_meta":{"origin":281999,"position":0},"title":"scroll-snap-stop","date":"March 7, 2019","format":false,"excerpt":"scroll-snap-stop is part of the CSS Scroll Snap Module. 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 a scroll-snapping container like putting a magnet on top of an element that sticks\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/scroll-snap-featured.gif?fit=800%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":283236,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-snap-align\/","url_meta":{"origin":281999,"position":1},"title":"scroll-snap-align","date":"February 21, 2019","format":false,"excerpt":"scroll-snap-align is part of the CSS Scroll Snap Module. 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 a scroll-snapping container like putting a magnet on top of an element that sticks\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":282511,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-padding\/","url_meta":{"origin":281999,"position":2},"title":"scroll-padding","date":"February 12, 2019","format":false,"excerpt":"scroll-padding is part of the CSS Scroll Snap Module. Scroll snapping refers to \u201clocking\u201d the position of the viewport to specific elements on the page as the window (or a scrollable container) is scrolled. Think of a scroll-snapping container like putting a magnet on top of an element that sticks\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/fingers-snap.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":282706,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-margin\/","url_meta":{"origin":281999,"position":3},"title":"scroll-margin","date":"February 13, 2019","format":false,"excerpt":"scroll-margin is part of the CSS Scroll Snap Module. 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 a scroll-snapping container like putting a magnet on top of an element that sticks\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/fingers-snap.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":283666,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overscroll-behavior\/","url_meta":{"origin":281999,"position":4},"title":"overscroll-behavior","date":"September 14, 2021","format":false,"excerpt":"The overscroll-behavior CSS property controls whether an element will use \u201cscroll chaining\u201d or not. You have likely experienced this behavior before and perhaps took it for granted that scrolling works like this on the web! If you are inside of an element that has its own scrolling (say it\u2019s vertical)\u2026","rel":"","context":"In \"overflow\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/overflow.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":196157,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-attachment\/","url_meta":{"origin":281999,"position":5},"title":"background-attachment","date":"February 17, 2015","format":false,"excerpt":"The background-attachment property in CSS specifies how to move the background relative to the viewport. There are three values: scroll, fixed, and local. The best way to explain this is via demo (try scrolling the individual backgrounds): See the Pen Background attachment demo by Timothy Miller (@tjacobdesign) on CodePen. There\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/281999"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223334"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=281999"}],"version-history":[{"count":19,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/281999\/revisions"}],"predecessor-version":[{"id":288562,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/281999\/revisions\/288562"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13947"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/282232"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=281999"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=281999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}