Disable Scroll for a period of time

Question

I have a function that creates a load block that lasts 1 second on the screen, I need that when I call this function, the page scroll is disabled for 1 second as well. After that 1 second scroll back to normal.

Image of the animation I’m talking about:

My Javascript code:

function AnimacaoCarregamento() {
  var block = $('#overlay').parent(); // cria o bloco de carregamento
  $(block).block({
    message: '<i class="icon-spinner4 spinner"></i>',
    timeout: 1000, //unblock after 2 seconds
    overlayCSS: {
      backgroundColor: '#2b2c46',
      opacity: 0.9,
      cursor: 'wait',
    },
    css: {
      border: 0,
      padding: 0,
      color: '#fff',
      backgroundColor: 'transparent'
    }
  });

  function setTopo() {
    $(window).scrollTop(0);
  }
  $(window).bind('scroll', setTopo);
}

The function setTopo() disables the scroll of the screen, but is disabled forever, and I need it to return to normal.

Answer 1

You just need to pass a function callback in the case setTimeout that will be fired X time after your scroll hide.

I left the code commented and set 2 seconds for the function to be called in order to make the effect more noticeable.

$('#btn-bloco').on('click', function(){
   //açoes da função..
   
   /*define o overflow como hidden e passa um timeout que será
   executado depois de 2 segundos voltando o overflow para visible*/
   $('html body').css('overflow', 'hidden', 
    setTimeout(function(){
    $('html body').css('overflow', 'visible')},2000));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
Exemplo de scroll habilitado após 2s
</div> <br>
<button id="btn-bloco"> Chama função </button>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Answer 2

Solution to remove scroll from page. Usually scroll is associated with body tag, I saw that you use jQuery then:

$('body').css('overflow','hidden');

This chunk of code disables the scroll. At the end of your job you can put something like.

var tempo = 1 //segundos;
setTimeout(() => {$('body').css('overflow','');},tempo * 1000);

css.('overflow','') restores the pattern before being modified by the above code.

Functional example:

$('#bt').click(() => {
  $('div').css('overflow','hidden');
  var tempo = 1//segundos;
  setTimeout(() => {$('div').css('overflow','')},tempo * 1000);
});

div{
  width: 100px;
  height: 100px;
  overflow-y: scroll;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p>Teste</p>
<p>Teste</p>
<p>Teste</p>
<p>Teste</p>
<p>Teste</p>
<p>Teste</p>
<p>Teste</p>
</div>
<input type="button" id="bt" value="Desabilitar Scroll">