Aqui está minha solução que usei em aplicativos.
Desativei o estouro do corpo e coloquei todo o html do site dentro do contêiner div. Os contêineres do site têm estouro e, portanto, o usuário pode rolar a página conforme o esperado.
Em seguida, criei um div irmão (#Prevent) com um Z-index mais alto que cobre todo o site. Como #Prevent tem um Z-index mais alto, ele se sobrepõe ao contêiner do site. Quando #Prevent está visível, o mouse não está mais pairando sobre os contêineres do site, portanto a rolagem não é possível.
Você pode, é claro, colocar outro div, como seu modal, com um índice z maior do que #Prevent na marcação. Isso permite que você crie janelas pop-up que não sofram de problemas de rolagem.
Esta solução é melhor porque não esconde as barras de rolagem (efeito de salto). Não requer ouvintes de eventos e é fácil de implementar. Ele funciona em todos os navegadores, embora com o IE7 e 8 você tenha que brincar (depende do seu código específico).
html
<body>
<div id="YourModal" style="display:none;"></div>
<div id="Prevent" style="display:none;"></div>
<div id="WebsiteContainer">
<div id="Website">
website goes here...
</div>
</div>
</body>
css
body { overflow: hidden; }
#YourModal {
z-index:200;
/* modal styles here */
}
#Prevent {
z-index:100;
position:absolute;
left:0px;
height:100%;
width:100%;
background:transparent;
}
#WebsiteContainer {
z-index:50;
overflow:auto;
position: absolute;
height:100%;
width:100%;
}
#Website {
position:relative;
}
jquery / js
function PreventScroll(A) {
switch (A) {
case 'on': $('#Prevent').show(); break;
case 'off': $('#Prevent').hide(); break;
}
}
desabilitar / habilitar a rolagem
PreventScroll('on'); // prevent scrolling
PreventScroll('off'); // allow scrolling