The alert event of javascript has an interesting effect, when it comes into activity, a modal appears, not hiding or disabling, but overlapping the native scroll of the HTML. How can we accomplish this same effect manually?
function myFunction() {
alert("I am an alert box!");
} .sob-scroll {
height: 1800px;
}<div class="sob-scroll">
<button onclick="myFunction()">Sobrepor scroll</button>
</div> The boxes for alert() , confirm() and prompt() are in a layer outside the bubble of your site's programming. That means you have limited control over them. Whoever exercises all the control is the browser you are using.
When a dialog box is displayed all site content gets stuck. The scrollbar does not work, just like a mouse click or any other algorithm that is running at that moment. This happens because the execution of these methods in Javascript is synchronous, so the code will only be continued after a user action.
See an example:
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> No SOen has an answer about how you can disable the scrolling of your site. In the response, it captures mouse and touch device scrolling events and runs preventDefault() , which cancels the current and post-event action.
See a sketch:
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> Not possible. Alert blocks content from the browser by creating another temporary window on top, even covering the scroll or even the entire window if necessary. A modal is not going to be "over" the current window, but within it, implemented within <body> .
It happens that in the alert, you are not overlapping the scroll you are taking the focus of the scope of the body. Although I do not recommend it, you can assign an event behavior to the scroll event by "blocking" its functionality.
function desabilita() {
window.addEventListener('scroll', noscroll);
}
function habilita(){
window.removeEventListener('scroll', noscroll);
}
function noscroll() {
window.scrollTo( 0, 0 );
}.sob-scroll {
height: 1800px;
}<div class="sob-scroll">
<button onclick="desabilita()">Desabilita scroll</button>
<button onclick="habilita()">Habilita scroll</button>
</div>