12 KiB
| title | chunk | source | category | tags | date_saved | instance |
|---|---|---|---|---|---|---|
| Scroll boundary - Glossary | MDN | 1/3 | https://developer.mozilla.org/en-US/docs/Glossary/Scroll_boundary | reference | web, html, css, javascript, documentation | 2026-05-05T05:44:38.812603+00:00 | kb-cron |
MDN HTML HTML: Markup language
HTML reference
HTML guides
Markup languages
CSS reference
CSS guides
Layout cookbook
JavaScriptJS JavaScript: Scripting language
JS reference
JS guides
Web APIs Web APIs: Programming interfaces
Web API reference
Web API guides
- Using the Web animation API
- Using the Fetch API
- Working with the History API
- Using the Web speech API
- Using web workers
Technologies
Topics
Learn Learn web development
Frontend developer course
- Getting started modules
- Core modules
- MDN Curriculum
- Check out the video course from Scrimba, our partner
Learn HTML
Learn CSS
Learn JavaScript
Tools Discover our tools
About Get to know MDN better
Scroll boundary
A scroll boundary is the point at which a scrollable element cannot be scrolled any further in a particular direction, either at the top or bottom (or left/right for horizontal scrolling). This typically is the edge of the scrollport.
When the content of a scroll container does not exceed the container size in the scrolling direction, the container is considered to be at its scroll boundary at all times. This is because there's no extra content to scroll through. If the content is prevented from scrolling, such as when overflow: hidden is set, the element is not a scroll container, and therefore, there is no scroll boundary.
When the scroll boundary of the scrollport is reached by a user scrolling the content, a visual effect such as a bounce or a functional action like pull-to-refresh on mobile devices may occur. This default browser behavior is called the boundary default action.
For example, on mobile devices, dragging a page downward when already at the top causes a bounce effect and sometimes triggers a page refresh. This bounce or refresh is the boundary default action.
Boundary default actions can be local or non-local.
- A local boundary default is the action that occurring at the boundary of a specific scrollable area confined to that element. This action is considered local as it does not affect any ancestor containers or the rest of the webpage.
- A non-local boundary default action is when reaching the scroll boundary of a scroll container has effects beyond the specific element being scrolled. An example of this is scroll chaining, where reaching the scroll boundary of one element triggers scrolling in a parent or ancestor element, and possibly even initiating a page-wide action, such as navigation.
In this article
See also
overscroll-behaviorCSS property- CSS overflow module
- CSS overscroll behavior module
- CSS scroll snap module
- CSS scroll anchoring module