If you use Microsoft Edge on Windows 10 and Google Chrome or
Safari on macOS, you might have noticed scroll bounce effect
when you scroll to the very top of a page, or to the bottom of
The scroll bounce effect, which is also known as ‘elastic
scrolling’, basically refers to a bounce whereby empty space
can be seen for a moment when you scroll to the very top or
bottom of the page. This scrolling effect has always been a
part of the Edge browser on Windows 10 and it’s also coming to
Chrome, thanks to Microsoft engineers.
In a commit,
Microsoft highlighted how it plans to allow the root scroller
to be over scrolled beyond the scroll bounds on Windows 10.
Chromium is being updated to use “OverscrollBounceController
drives,” which allows the browser to scroll deltas on GSU into
a hyperbolic tangent function.
The main idea behind the feature is that when the user pans to
the bounds of the root scroller (very top or bottom of the
page), the scroller will “overscroll” and you will notice a
“bounce” effect and an empty space.
“When the user stops the scroll interaction, the overscroll
should animate back to the bounds of the scroller. This
all holds true for a fling as well. When a fling hits the
bounds of the root scroller, the velocity should cause
overscroll to initiate – it will animate into the overscroll
until it reaches a rest, and then animate back to the bounds,”
The empty space or the bounce effect can be noticed for a few
seconds before the page springs back. You will notice this
effect when you scroll on a device using a touchscreen or
“There already exists an implementation of this for Mac. The
main controller for this is InputScrollElasticityController.
However, this new feature – Overscroll Bounce – has a different
personality that largely matches the rest of Windows
application,” Microsoft noted.
An experimental feature flag “Elastic Overscroll for Windows”
is already available in Google Chrome Canary.