{"id":283331,"date":"2019-03-07T08:22:17","date_gmt":"2019-03-07T15:22:17","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=283331"},"modified":"2019-05-29T07:33:40","modified_gmt":"2019-05-29T14:33:40","slug":"scroll-snap-stop","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-snap-stop\/","title":{"rendered":"scroll-snap-stop"},"content":{"rendered":"<p><code>scroll-snap-stop<\/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<p><code>scroll-snap-stop<\/code> is an optional 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>.<\/p>\n<p><code>scroll-snap-stop<\/code> allows you to <em>force<\/em> the scroll-snapping container to snap to a particular element. Suppose you were scrolling within a scroll-snapping container, and you gave it a giant spin-of-the-mousewheel. Normally, the browser would let the velocity of your scrolling fly past snap points until it settled on a snap point close to where the scrolling would normally end. By setting <code>scroll-snap-stop<\/code> you can tell the browser that it <em>must<\/em> stop on a particular element before allowing the user past it.<\/p>\n<pre rel=\"CSS\" class=\"language-css\"><code class=\"language-css\">\/* Assuming this element is a child of a container with `scroll-snap-type` set *\/\r\n.element {\r\n  scroll-snap-stop: always;\r\n}<\/code><\/pre>\n<h3 id=\"syntax\">Syntax<\/h3>\n<pre rel=\"CSS\" class=\"language-css\"><code class=\"language-css\">scroll-snap-stop: normal | always;<\/code><\/pre>\n<h3 id=\"values\">Values<\/h3>\n<p><code>scroll-snap-stop<\/code> accepts the following values:<\/p>\n<ul>\n<li><code>normal<\/code> is the default value and allows an element to be scrolled past without snapping<\/li>\n<li><code>always<\/code> will force the browser to snap to this element, even if the scroll would normally go past this element<\/li>\n<\/ul>\n<h3 id=\"example\">Example<\/h3>\n<p data-height=\"530\" style=\"height: 530px; 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=\"RvOEjw\" data-default-tab=\"result\" data-user=\"css-tricks\" data-pen-title=\"scroll-snap-stop example\n\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/css-tricks\/pen\/RvOEjw\" rel=\"noopener\">scroll-snap-stop 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\">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<p>Note that Chrome <a href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=823998&amp;q=scroll-snap-stop&amp;colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified\" rel=\"noopener\">may not support<\/a> <code>scroll-snap-stop: always;<\/code> at the moment.<\/p>\n<h3>Related<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-snap-type\/\"><code>scroll-snap-type<\/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-padding\/\"><code>scroll-padding<\/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<\/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>scroll-snap-stop 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":274835,"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":281999,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-snap-type\/","url_meta":{"origin":283331,"position":0},"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":283236,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-snap-align\/","url_meta":{"origin":283331,"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":283331,"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":283331,"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":196157,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-attachment\/","url_meta":{"origin":283331,"position":4},"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":[]},{"id":336045,"url":"https:\/\/css-tricks.com\/video-screencasts\/205-sticky-positioning-how-it-works-what-can-break-it-and-dumb-tricks\/","url_meta":{"origin":283331,"position":5},"title":"#205: Sticky Positioning: How it Works, What Can Break It, and Dumb Tricks","date":"March 15, 2021","format":false,"excerpt":"How it works You apply position: sticky; to an element along with a top, left, right, or bottom threshold and it will \"stick\" in that position when the threshold is passed, as long as there is room to move within the parent container. CodePen Embed Fallback What can break it\u2026","rel":"","context":"In \"sticky\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/thumb-sticky.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/283331"}],"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=283331"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/283331\/revisions"}],"predecessor-version":[{"id":288564,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/283331\/revisions\/288564"}],"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\/274835"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=283331"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=283331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}