0

O evento alert do javascript tem um efeito interessante, quando entra em atividade, um modal aparece, não ocultando ou desabilitando, mas sobrepondo o scroll nativo do HTML. Como podemos realizar esse mesmo efeito manualmente?

function myFunction() {
    alert("I am an alert box!");
}
		.sob-scroll {
			height: 1800px;
		}
<div class="sob-scroll">
	<button onclick="myFunction()">Sobrepor scroll</button>
</div>

4
  • 1
    Na verdade ele não sobrepoe o scroll não. É apenas uma janela de diálogo do navegador que bloqueia o acesso à janela enquanto não for fechada, igual acontece com qualquer outro aplicativo.
    – Sam
    Commented 30/04/2018 às 19:25
  • Vc não consegue bloquear o scroll, mas consegue prevenir o scroll, desabilitando todas as interações que o usuário pode ter com a página. Vc pode fazer um btn que desabilita o scroll do mouse, o touche e as teclas que fazem o scroll.
    – hugocsl
    Commented 30/04/2018 às 19:33
  • @dvd compreendo! Desabilitar, remover já fiz isso, por exemplo em um modal simples, que ocupa toda a tela, eu desabilito o scroll do html, e ao mesmo tempo coloco um padding-right:16px; para compensar. Existe um atraso, então pensei se seria possível sobrepor. Commented 30/04/2018 às 19:47
  • Mas não é uma prática muito boa colocar padding pra compensar, visto que a largura do scroll pode sofrer variações de navegador pra navegador.
    – Sam
    Commented 30/04/2018 às 19:53

3 Respostas 3

2

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>

3
  • 1
    Ações de bloqueio podem causar uma má experiência no site/webapp, principalmente se forem interpretadas como travamento ou lentidão. E alerts podem ser bloqueados pelo cliente no browser, quebrando essa funcionalidade de travamento. Commented 30/04/2018 às 19:44
  • 1
    @CleitonOliveira sim. A intenção não foi incentivar o uso mas explicar o porquê que há o travamento. Além disso um alert() bloqueado pelo cliente perde sua funcionalidade e ainda assim depende de uma ação do usuário.
    – bio
    Commented 30/04/2018 às 19:50
  • 1
    @bio vlw, eu já tinha encontrado várias soluções, inclusive aqui no SO, para desabilitar/ocultar o scroll. Então esses dias me lembrei do evento alert, e pensei que talvez fosse possível realizar ele manualmente, para aplicar em um modal/light box etc. Commented 30/04/2018 às 20:03
0

Não é possível. O Alert bloqueia o conteúdo que estiver no browser criando outra janela temporária por cima, cobrindo inclusive o scroll ou mesmo a janela inteira se necessário. Um modal não vai estar "por cima" da janela atual e sim dentro dela, implementado dentro do <body>.

0

Acontece que no alert, você não está sobrepondo o scroll você está tirando o foco do escopo do body. Embora eu não recomende, você pode atribuir um evento comportamento ao evento de scroll "bloqueando" sua funcionalidade.

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>

1
  • 1
    não seria melhor event.preventDefault?
    – Syzoth
    Commented 30/04/2018 às 19:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .