How to prevent body from scrolling on mobile/touch devices when overflow: hidden?

Question

css

When opening a modal window with position:fixed, a class is added to the body with the parameter overflow: hidden and height: 100%. Only the content of the modal scrolls from the computer, but from the phone (tested on the iPhone and Windows Phone 8/8.1) the page itself will scroll (you can take the bootstrap modal window as an example ). How can I prevent page scrolling, leaving the ability to scroll inside the modal?

Answer 1

Here is my solution via CSS.

Answer 2

Specify meta tag

<meta name="viewport" content="width=device-width, initial-scale=1">

body{
overflow:hidden;
}
MyModal#{
overflow:scroll;
}
Something like this.

Answer 3

$(window).scroll(function(){
   if($('body').scrollTop()>0)
        $('body').scrollTop(0);
});

PS: It can be even simpler:

$(window).scroll(function(){
        $('body').scrollTop(0);
});