Disable Scroll for a period of time

Navigation
2

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

Image of the animation I am referring to:

MyJavaScriptcode:

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 setTopo() function disables the screen scroll, but is disabled forever, and needs to return to normal.

    
asked by anonymous 25.10.2018 / 16:34

2 answers

2

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

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>Exemplodescrollhabilitadoapós2s</div><br><buttonid="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>
    
25.10.2018 / 16:57
1

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

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

This code snippet disables scrolling. At the end of your function you can put something like. 

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

The '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><divclass="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">
    
25.10.2018 / 16:52
What are environment variables? Format date DD-MM-YYYY string jquery [duplicate]