How to disable scrolling on mobile browsers?

I'm trying to disable scrolling on a web page when an user open a popup (but he can scroll it).

The popup element has following attributes:

#popup {
    display: none;
    width: 100%;
    height: 100%;
    z-index: 10;
    position: fixed;
    background-color: #3F3F3F;
    overflow: auto;
    left: 0;
    top: 0;
}

And when the user opening a popup, the following code is called:

$('#popup').show();
$('html').attr('style', 'overflow: hidden;');
$('body').attr('style', 'overflow: hidden; position: relative;');

This solution perfectly work on a desktop browser, but unfortunatly not on mobile.

On mobile, it always possible to scroll (but the scroll speed is slow).

How can I disable also scrolling on mobile browser?

Thanks in advance.