
In other words, when the scrollport has reached its scroll boundary. However, this article focuses on scroll bouncing when you scroll to the very top or very bottom of a web page. You can see a similar effect happen in CSS scroll-snapping between elements. Scroll bouncing (also sometimes referred to as scroll ‘rubber-banding’, or ‘elastic scrolling’) is often used to refer to the effect you see when you scroll to the very top of a page or HTML element, or to the bottom of a page or element, on a device using a touchscreen or a trackpad, and empty space can be seen for a moment before the element or page springs back and aligns itself back to its top/bottom (when you release your touch/fingers). A good understanding of this effect is very helpful for building or designing any website that has fixed elements. The CSS property, overscroll-behavior, which was implemented in Chrome on December 2017 and in Firefox on March 2018, is also described in this article.


It contains reviews of several different solutions that are suggested on the web that can be used to prevent scroll bouncing. This article describes the effect of scroll bouncing and how it works on different web browsers.
