{"id":282706,"date":"2019-02-13T09:30:16","date_gmt":"2019-02-13T16:30:16","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=282706"},"modified":"2019-05-29T07:27:27","modified_gmt":"2019-05-29T14:27:27","slug":"scroll-margin","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-margin\/","title":{"rendered":"scroll-margin"},"content":{"rendered":"

scroll-margin<\/code> 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 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

scroll-margin<\/code> is an optional property for a scroll-snapping element within a scroll-snapping container. For more information on scroll-snapping containers see the scroll-snap-type<\/code> almanac entry<\/a>.<\/p>\n

Enter scroll-margin<\/h3>\n

scroll-margin<\/code> is used to adjust an element’s snap area (the box that defines where the element will be snapped to). Adding scroll-margin<\/code> is useful when you need to give an element space from the edge of the container when snapped into place, but allowing for situations where each element might need slightly different spacing. If all elements have the same spacing requirements, consider using scroll-padding<\/code> on the parent container instead of scroll-margin<\/code> because that affects spacing for all elements within the container.<\/p>\n

A simple example where the scroll-margin<\/code> allows for 50px spacing around the top and left of an element looks like this:<\/p>\n

.scroll-element {\r\n  scroll-margin: 50px 0 0 50px;\r\n}<\/code><\/pre>\n
\"\"
The pink area represents the scroll-margin<\/code> on this element.<\/figcaption><\/figure>\n
Syntax<\/h3>\n
\/* Shorthand *\/\r\nscroll-margin: <length>{1,4};\r\n\r\n\/* Longhands *\/\r\nscroll-margin-top: <length>;\r\nscroll-margin-right: <length>;\r\nscroll-margin-bottom: <length>;\r\nscroll-margin-left: <length>;\r\n\r\n\/* inline-specific and block-specific properties as well *\/\r\nscroll-margin-block: <length>{1,2};\r\nscroll-margin-inline: <length>{1,2};<\/code><\/pre>\n
Important note on longhands:<\/strong> Chrome (and possibly other browsers) do not currently support longhand-format scroll-padding<\/code> and scroll-margin<\/code> properties. Use the shorthand for maximum browser support. See this issue on the chromium bug tracker<\/a> for more details and current status.<\/p>\n
Values<\/h3>\n
scroll-margin<\/code> accepts the following a length <length><\/code> value, which is written similar to margin<\/code> and other properties where the value can be defined with units (px<\/code>, em<\/code>, vh<\/code>, etc). See the W3C Values and Units Module<\/a> for more information. Percentages cannot be used for scroll-margin<\/code> per the spec.<\/p>\n
Example<\/h3>\n
See the Pen scroll-padding example
\n<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n
Browser Support<\/h3>\n
This browser support data is from Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div>
Desktop<\/h4>
Chrome<\/span><\/th>Firefox<\/span><\/th>IE<\/span><\/th>Edge<\/span><\/th>Safari<\/span><\/th><\/tr><\/thead>
69<\/span><\/td>68<\/span><\/td>11*<\/span><\/td>79<\/span><\/td>11<\/span><\/td><\/tr><\/table><\/div>
Mobile \/ Tablet<\/h4>
Android Chrome<\/span><\/th>Android Firefox<\/span><\/th>Android<\/span><\/th>iOS Safari<\/span><\/th><\/tr><\/thead>
124<\/span><\/td>125<\/span><\/td>124<\/span><\/td>11.0-11.2<\/span><\/td><\/tr><\/table><\/div><\/div>\n
Related<\/h3>\n