Prevent “overscrolling” of web page

Question

In Chrome for Mac, one can \"overscroll\" a page (for lack of a better word), as shown in the screenshot below, to see \"what\'s behind\", similar to the iPad or iPhone.

Answer 1

In Chrome 63+, Firefox 59+ and Opera 50+ you can do this in CSS:

body {
  overscroll-behavior-y: none;
}

This disables the rubberbanding effect on iOS shown in the screenshot of the question. It however also disables pull-to-refresh, glow effects and scroll chaining.

You can however elect to implement your own effect or functionality upon over-scrolling. If you for instance want to blur the page and add a neat animation:

Browser Support

As of this writing Chrome 63+, Firefox 59+ and Opera 50+ support it. Edge publically supported it while Safari is an unknown. Track progress here and current browser compatibility at MDN documentation

More information

• Chrome 63 release video
• Chrome 63 release post - contains links and details to everything I wrote above.
• overscroll-behavior CSS spec
• MDN documentation