{"id":283236,"date":"2019-02-21T09:25:53","date_gmt":"2019-02-21T16:25:53","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=283236"},"modified":"2021-01-01T08:02:12","modified_gmt":"2021-01-01T16:02:12","slug":"scroll-snap-align","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-snap-align\/","title":{"rendered":"scroll-snap-align"},"content":{"rendered":"\n<p><code>scroll-snap-align<\/code> is part of the CSS Scroll Snap Module. Scroll snapping refers to &#8220;locking&#8221; 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 to the top of the viewport and forces the page to stop scrolling right there.<\/p>\n\n\n\n<p><code>scroll-snap-align<\/code> is a required property for a scroll-snapping element within a scroll-snapping container. For more information on scroll-snapping containers see the <code>scroll-snap-type<\/code> <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-snap-type\/\">almanac entry<\/a>. <code>scroll-snap-align<\/code> tells the browser which part of an element should be aligned when a snap point is encountered: Should the element snap to the <code>start<\/code>, <code>center<\/code> , or <code>end<\/code> of the parent container that contains the <code>scroll-snap-type<\/code> property?<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>If you want an element to snap into place at the start of that element, give it a <code>scroll-snap-align<\/code> value like so:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Assuming this element is a child of a container with `scroll-snap-type` set *\/\n.element {\n  scroll-snap-align: start;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">scroll-snap-align: [ none | start | end | center ]{1,2}<\/code><\/pre>\n\n\n\n<p>You can specify up to 2 values for this property, representing the <em>block<\/em> and <em>inline<\/em> axes, respectively. If you only give 1 value, that value will be used for both axes.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<p><code>scroll-snap-align<\/code> accepts the following values:<\/p>\n\n\n\n<ul><li><code>none<\/code> disables scroll snapping on the element<\/li><li><code>start<\/code> aligns the element&#8217;s start with the scroll container&#8217;s snapport when snapped into place<\/li><li><code>end<\/code> aligns the element&#8217;s end with the scroll container&#8217;s snapport when snapped into place<\/li><li><code>center<\/code> aligns the element&#8217;s center with the scroll container&#8217;s snapport when snapped into place<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"example\">Example<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KjgQxB\" src=\"\/\/codepen.io\/anon\/embed\/KjgQxB?height=450&amp;theme-id=1&amp;slug-hash=KjgQxB&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KjgQxB\" title=\"CodePen Embed KjgQxB\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser Support<\/h3>\n\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\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">124<\/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\n\n<h3 class=\"wp-block-heading\" id=\"related\">Related<\/h3>\n\n\n<ul><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-snap-type\/\"><code>scroll-snap-type<\/code><\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-margin\/\"><code>scroll-margin<\/code><\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-padding\/\"><code>scroll-padding<\/code><\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-snap-stop\/\"><code>scroll-snap-stop<\/code><\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"resources\">Resources<\/h3>\n\n\n<ul><li><a href=\"https:\/\/www.w3.org\/TR\/css-scroll-snap-1\/\" rel=\"noopener\">CSS Scroll Snap W3C Candidate Recommendation<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/practical-css-scroll-snapping\/\">Practical CSS Scroll Snapping<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/introducing-css-scroll-snap-points\/\">Introducing CSS Scroll Snap Points<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>scroll-snap-align is part of the CSS Scroll Snap Module. Scroll snapping refers to &#8220;locking&#8221; 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 to the top of the [&hellip;]<\/p>\n","protected":false},"author":223334,"featured_media":0,"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":283236,"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":281999,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-snap-type\/","url_meta":{"origin":283236,"position":1},"title":"scroll-snap-type","date":"February 4, 2019","format":false,"excerpt":"The scroll-snap-type property 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 it 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":283236,"position":2},"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":282511,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-padding\/","url_meta":{"origin":283236,"position":3},"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":283666,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overscroll-behavior\/","url_meta":{"origin":283236,"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":14121,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/top-right-bottom-left\/","url_meta":{"origin":283236,"position":5},"title":"top \/ bottom \/ left \/ right","date":"September 6, 2011","format":false,"excerpt":"The top, bottom, left, and right properties are used with position to set the placement of an element. They only have an effect on positioned elements, which are elements with the position property set to anything other than static. For example: relative, absolute, fixed, or sticky. div { : ||\u2026","rel":"","context":"In \"bottom\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/283236"}],"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=283236"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/283236\/revisions"}],"predecessor-version":[{"id":332123,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/283236\/revisions\/332123"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13947"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=283236"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=283236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}