Porque o alert 'trava' o scroll?
As caixas de alert()
, confirm()
e prompt()
estão em uma camada fora da bolha da programação do seu site. Isso significa que você tem um controle limitado sobre elas. Quem exerce todo o controle é o navegador que você está utilizando.
Quando uma caixa de diálogo é exibida todo o conteúdo do site fica travado. A scrollbar não funciona, assim como um click de mouse ou qualquer outro algoritmo que esteja sendo executado naquele momento. Isso acontece pois a execução desses métodos em Javascript é síncrono, portanto o código só será continuado depois de uma ação do usuário.
Veja um exemplo:
var intervalo = setInterval(function(){
console.log("Oi");
}, 1000);
function travar() {
alert("Este alert 'travou' todo o site! Veja que o console.log não exibe mais o 'Oi'.");
}
<a href="#" onclick="travar()">Clique aqui</a>
Como bloquear o scroll?
No SOen tem uma resposta sobre como você pode desabilitar o scroll do seu site. Na resposta, ele capta os eventos de scrolling do mouse e dos dispositivos touch e executa o preventDefault()
, que cancela a ação atual e posterior ao evento.
Veja um esboço:
function desativar() {
var div = document.getElementById("conteudo");
if (window.addEventListener) { // navegadores antigos
window.addEventListener('DOMMouseScroll', preventDefault, false);
}
div.onwheel = preventDefault;
div.onmousewheel = document.onmousewheel = preventDefault; // navegadores antigos, IE
div.ontouchmove = preventDefault; // mobile
console.log("Desativado!");
}
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
<div id="conteudo" style="overflow: overlay; width: 150px; height: 100px;">
<p>Linha1</p>
<p>Linha2</p>
<p>Linha3</p>
<p>Linha4</p>
<p>Linha5</p>
<p>Linha6</p>
<p>Linha7</p>
<p>Linha8</p>
</div>
<p><a href="#" onclick="desativar();">Desativar Scroll</a></p>