Question

I’m developing modal windows with the ability of being scrollable, like pinterest ones. When they are fired define overflow: hidden on body and overflow: auto on the modal box container. This works very well on desktop browsers but my first test on iPad (and I assume that probably on iOS in general) reveals a problem:

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

I tried this with the intention of only accept scrolling if it is triggered by the 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 strictly that. The modal scrolls and when it ends scrolling the page is possible only if you scroll inside the modal.

Do you have any idea?

Try it in your ipads if you want (you have to click on the modal button): http://www.onebigrobot.com/beta/altair/transforms-so

Thank you in advance!

Answer 1

Small changes are powerful!

All the problem is solved changing position: absolute by position: fixed on the modal container (and also on the dark mask of the background if needed). In fact with absolute positioning the modal only worked because the button was at the top of the page.

With fixed positioning desktop browsers works perfectly, and on the ipad something interesting occurs. When the scroll of the modal ends the scroll of the page begins to work but with the modal always on top well positioned.

I hope this question could be useful for someone.