Remove bounce on scroll in browser, issue with position:fixed div

Bounce scroll in the browser is a feature of some versions of iOS / macOS.

To prevent it from happening on a website we can use the following:


html, body {
    height: 100%;
    overflow: hidden;

#main-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;


    <div id="main-container">


There's a simpler answer suggested here for a related question: OSX - disable inertia scroll for "single-page" webapp

body {
    overflow: hidden;

While the accepted answer works. Here is a simpler and updated version.

body {
    overscroll-behavior-y: none;

It does however not work for IE and Safari which is unfortunate. Here is the browser support.