{"id":283666,"date":"2021-09-14T02:39:11","date_gmt":"2021-09-14T09:39:11","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=283666"},"modified":"2022-09-12T15:15:26","modified_gmt":"2022-09-12T22:15:26","slug":"overscroll-behavior","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overscroll-behavior\/","title":{"rendered":"overscroll-behavior"},"content":{"rendered":"\n

The overscroll-behavior<\/code> 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) and you have scrolled down to the bottom of it, then by default, the next parent element up (maybe the page itself) starts to scroll in that direction. If you don\u2019t want that default, overscroll-behavior<\/code> is what controls it.<\/p>\n\n\n\n

In other words, it specifies how the browser behaves when reaching the boundary of a scrolling area.<\/p>\n\n\n\n

.stop-scroll-chaining {\n  overscroll-behavior: contain; \/* or \"none\" *\/\n}<\/code><\/pre>\n\n\n\n
overscroll-behavior<\/code> is a shorthand for overscroll-behavior-x<\/code> and overscroll-behavior-y<\/code> and it is defined in the CSS Overscroll Behavior Module Level 1 Specification<\/a> which is currently in Editor\u2019s Draft status.<\/p>\n\n\n\n\n\n\n
Scroll chaining and overscroll affordances<\/h3>\n\n\n
Scroll chaining<\/strong><\/dfn> is when scrolling is propagated from one scroll container to an ancestor scroll container. You can see this effect in following video:<\/p>\n\n\n\n
Overscroll affordance<\/dfn><\/strong> is stuff like the overscroll glow effect on Android<\/a> or the rubber-banding effect on iOS<\/a>, both of which serve as a visual indicator that the user has hit a scroll boundary. You may also see other implementations in the wild, like a “bounce” effect on mobile browsers or a page refresh when the top or bottom of a page is reached.<\/p>\n\n\n
Syntax<\/h3>\n\n\n
overscroll-behavior: [ contain | none | auto ]{1,2}<\/code><\/pre>\n\n\n\n
  • Initial value:<\/strong> auto<\/code><\/li>
  • Applies to:<\/strong> non-replaced block-level elements and non-replaced inline-block elements<\/li>
  • Inherited:<\/strong> no<\/li>
  • Percentages:<\/strong> n\/a<\/li>
  • Computed value:<\/strong> as each of the properties of the shorthand<\/li>
  • Animation type:<\/strong> discrete<\/li><\/ul>\n\n\n
    Values<\/h3>\n\n\n
    \/* Keyword values *\/\noverscroll-behavior: auto; \/* default *\/\noverscroll-behavior: contain;\noverscroll-behavior: none;\n\n\/* Two values *\/\noverscroll-behavior: none auto;\noverscroll-behavior: auto contain;\n\n\/* Global values *\/\noverscroll-behavior: inherit;\noverscroll-behavior: initial;\noverscroll-behavior: revert;\noverscroll-behavior: unset;<\/code><\/pre>\n\n\n\n
    • auto<\/code>:<\/strong> The default<\/em> value. Specifies that the browser should perform the default boundary action, and makes it possible for the user to continue scrolling through a parent scroll area when the boundary of the primary scroll area has been reached. In other words, it allows scroll chaining and overscroll affordances.<\/li>
    • contain<\/code>:<\/strong> Prevents scroll chaining. Scrolls do not propagate to ancestors (the other elements in a parent container) but preserve overscroll affordances like \u201cbounce\u201d effects when scrolling past the end of the container in operating systems that support it.<\/li>
    • none<\/code>:<\/strong> Prevents scroll chaining and also prevents overscroll affordances. So, you won\u2019t get that Android overscroll glow or iOS rubber-banding effect.<\/li>
    • initial<\/code>:<\/strong> Applies the property\u2019s default setting, which is auto<\/code>.<\/li>
    • inherit<\/code>:<\/strong> Adopts the overscroll-behavior<\/code> value of the parent.<\/li>
    • unset<\/code>:<\/strong> Removes the current overscroll-behavior<\/code> from the element.<\/li><\/ul>\n\n\n
      Constituent properties<\/h3>\n\n\n
      We mentioned it earlier, but over scroll-behavior<\/code> is shorthand for two other CSS properties, which call the \u201cconstituent properties\u201d of the shorthand. Let\u2019s look at those individually.<\/p>\n\n\n
      overscroll-behavior-x<\/code><\/h4>\n\n\n
      As the name suggests, the overscroll-behavior-x<\/code> CSS property allows you to control the browser’s behavior when the horizontal boundary<\/strong> of a scrolling area is reached. So, where we can control both the horizontal and vertical over scroll behavior with overscoll-behavior<\/code> alone, overscroll-behavior-x<\/code> only controls the behavior in the left and right direction.<\/p>\n\n\n\n
      In the following demo, you can see the different behavior of browser when the value of overscroll-behavior-x<\/code> is contain<\/code>:<\/p>\n\n\n\n