IPad disables document scrolling but does not scroll overflow div

I design scrollable modal windows, for example pinterest. When they start, define overflow: hiddenin bodyand overflow: autoin the modal container container. This works very well on desktop browsers, but my first test on the iPad (and I guess that probably on iOS in general) detects a problem:

When the modal end scroll ends, if the document is longer than the modal end, scrolling continues.

I tried this with the intention of accepting only scrolling if it is triggered by a modal or its container:

// Disable browser scrolling on iOS
$(document).on('touchmove',function(e) {
    if (($(e.target).attr('id') != id) &&
    ($(e.target).attr('id') != ('modal-'+id))) {
        e.preventDefault();
    }
});

And it really works, doing it strictly. Modal scrolls and completion of page scrolling are possible only when scrolling inside a modal file.

Do you have any ideas?

ipads, ( ): http://www.onebigrobot.com/beta/altair/transforms-so

!

+5
1

!

, position: absolute position: fixed ( , ). , , .

, ipad - . , , .

I hope this question can be useful for someone.

+7
source

All Articles