{"id":282511,"date":"2019-02-12T15:49:09","date_gmt":"2019-02-12T22:49:09","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=282511"},"modified":"2019-05-29T07:29:01","modified_gmt":"2019-05-29T14:29:01","slug":"scroll-padding","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-padding\/","title":{"rendered":"scroll-padding"},"content":{"rendered":"<p><code>scroll-padding<\/code> 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 &#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-padding<\/code> is an optional property for any scroll-snapping container. Scroll-snapping containers are defined whenever the <code>scroll-snap-type<\/code> property is set to any value besides <code>none<\/code>. 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<h3>OK, so moving on to scroll-padding<\/h3>\n<p><code>scroll-padding<\/code> is used to adjust the snapping container&#8217;s optimal viewing region. This is useful if the container has elements such as a fixed header that would obscure elements inside or if the scrollable container needs some space to give the interior elements room to breathe once they&#8217;ve been &#8220;snapped&#8221; into position.<\/p>\n<p>A simple example would be using <code>scroll-padding<\/code> to create some fixed spacing of <code>50px<\/code> at the top and left of the container:<\/p>\n<pre rel=\"CSS\" class=\"language-css\"><code class=\"language-css\">.scroll-container {\r\n  scroll-padding: 50px 0 0 50px;\r\n}<\/code><\/pre>\n<figure id=\"post-282513\" class=\"alignnone media-282513\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/scroll-padding.png?w=377&#038;ssl=1\" alt=\"A diagram with 2 boxes, one is the element container with a pink background and 50 pixels of spacing on the top and the left hand sides of the container. The second box is the element itself in dark gray sitting against the bottom left edge of the container.\" data-recalc-dims=\"1\" \/><figcaption>The areas in pink show the scroll-padding on the scroll-snapping container.<\/figcaption><\/figure>\n<h3 id=\"syntax\">Syntax<\/h3>\n<pre rel=\"CSS\" class=\"language-css\"><code class=\"language-css\">\/* Shorthand *\/\r\nscroll-padding: [ &lt;length-percentage&gt; | auto ]{1,4};\r\n\r\n\/* Longhands *\/\r\nscroll-padding-top: &lt;length-percentage&gt; | auto;\r\nscroll-padding-right: &lt;length-percentage&gt; | auto;\r\nscroll-padding-bottom: &lt;length-percentage&gt; | auto;\r\nscroll-padding-left: &lt;length-percentage&gt; | auto;\r\n\r\n\/* inline-specific and block-specific properties as well *\/\r\nscroll-padding-block: [ &lt;length-percentage&gt; | auto ]{1,2};\r\nscroll-padding-inline: [ &lt;length-percentage&gt; | auto ]{1,2};<\/code><\/pre>\n<p class=\"explanation\"><strong>Important note on longhands:<\/strong> Chrome does not currently support longhand-format <code>scroll-padding<\/code> and <code>scroll-margin<\/code> properties. Use the shorthand for maximum browser support. See <a href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=921319&amp;q=scroll-padding&amp;colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified\" rel=\"noopener\">this issue on the chromium bug tracker<\/a> for more details and the current status.<\/p>\n<h3 id=\"values\">Values<\/h3>\n<p><code>scroll-padding<\/code> accepts the following values:<\/p>\n<ul>\n<li><code>auto<\/code> leaves the padding to be determined by the browser\/user-agent. Generally, this means a value of 0px, but can be non-zero if the user-agent decides another value is more appropriate.<\/li>\n<li><code>&lt;length-percentage&gt;<\/code> is written similar to <code>padding<\/code> and other properties where the value can be defined with units (<code>px<\/code>, <code>em<\/code>, <code>vh<\/code>, etc.) or as a percentage of the container itself.<\/li>\n<\/ul>\n<h3 id=\"example\">Example<\/h3>\n<p data-height=\"500\" style=\"height: 500px; 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=\"GzQpbq\" data-default-tab=\"result\" data-user=\"css-tricks\" data-pen-title=\"scroll-padding example\n\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/andyadams\/pen\/GzQpbq\" rel=\"noopener\">scroll-padding 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<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-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>scroll-padding 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":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":282511,"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":282511,"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":282706,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-margin\/","url_meta":{"origin":282511,"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":281999,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-snap-type\/","url_meta":{"origin":282511,"position":3},"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":283666,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overscroll-behavior\/","url_meta":{"origin":282511,"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":13457,"url":"https:\/\/css-tricks.com\/snippets\/css\/prevent-bounce-scroll-in-lion\/","url_meta":{"origin":282511,"position":5},"title":"Prevent Bounce Scroll in Lion","date":"August 5, 2011","format":false,"excerpt":"Just make sure you zero out the margin and padding on those elements as well (normal in any reset or normalization). html, body { height: 100%; overflow: hidden; }","rel":"","context":"With 9 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/282511"}],"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=282511"}],"version-history":[{"count":20,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/282511\/revisions"}],"predecessor-version":[{"id":288559,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/282511\/revisions\/288559"}],"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=282511"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=282511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}