all articles

disable elastic scroll on iOS safari

2016-10-07 @sunderls

elastic scroll iOS safri js

description, bug

iOS safari auto-minimizes address bar when scrolling, which cause window.innerHeight to change.

The toggling of address bar make the web app less like an app, sometimes we'd like to stop the elastic scrolling effect.

how to do this

if set overflow:hidden to body, html, this can stop elastic scroll by also it disables scolling.

set overflow:auto to body ?

we can have a try at overflow:auto;-webkit-overflow-scrolling: touch; on body, this woks much better, but has some weird effect on scrolling. The body actually has elastic scroll and make header invisible.

gif

here is the code

    html,body {
        margin: 0 0;
        height: 100%;
        width: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

here is the demo effect:

http://colla.me/test/disable_elastic_scroll_overflow_on_body.html

solution, overflow:auto on container

we can try the above css to the container. .container is the <div> tag under body. This seems to work well.

    .container {
        height: 500px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    html,body {
        margin: 0 0;
        height: 100%;
        width: 100%;
        overflow: auto;
    }

    .inner {
        height: 2000px;
    }

here is the result:

gif

you can try the demo here:

http://colla.me/test/disable_elastic_scroll_overflow_on_container.html