如何在元素的slideUp（）之前阻止滚动和主体高度，并在新元素的slideDown（）之后移除CSS？ -jQuery的

Question

I assure you that I'm going crazy. I've tried hundreds of changes but I can not solve this problem.

In practice I have a page with 3 tabs but only one tab can be displayed at a time. If you click on the button, to view the new tab, the old one will be a slideUp and after that the new tab will appear with a slideDown .

The problem is that the tabs have different heights, so when a tab disappears, for a few moments, the window will have a different height and an automatic scroll will occur.

I want to avoid this scroll but I do not know how ...

 $(document).ready(function() { $(document).scrollTop(30); //se viene cliccato un altro pulsante "SCHEDA" $('#button-scheda-mappa, #button-scheda-vulcani, #button-scheda-storici').on('click', function() { var mostra_scheda = ($(this).attr('id')).substr(7); $('#scheda-mappa, #scheda-vulcani, #scheda-storici').not('#' + mostra_scheda).slideUp(800); ////chiudo le altre voci aperte e le "pulisco" (eccetto quella appena cliccata) $('#' + mostra_scheda).delay(500).slideDown(800); //mostro la tendina del form (che sarebbe l'elemento successivo a quello appena cliccato) }); // }); 

 #box-buttons { display: flex; justify-content: space-between; width: 400px; } #button-scheda-mappa, #button-scheda-vulcani, #button-scheda-storici { width: 50px; background-color: #000; color: #fff; cursor: pointer; } #schede { width: 100%; display: flex; flex-direction: row; margin-top: 12px; font-size: 16px; color: #fff; justify-content: space-between; } #scheda-mappa, #scheda-vulcani, #scheda-storici { display: flex; align-items: center; justify-content: center; flex-direction: column; width: calc(100% - 2px); height: auto; background-color: #a0a0a0; border: 1px solid #404040; position: relative; top: -1px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <br> <br> <div id="box-buttons"> <div id="button-scheda-mappa"> 1 </div> <div id="button-scheda-vulcani"> 2 </div> <div id="button-scheda-storici"> 3 </div> </div> <br> <br> <div id="schede"> <div id="scheda-mappa"> <div style="height: 3000px"> </div> </div> <div id="scheda-vulcani" style="display:none; width: calc(100% - 2px); height: auto; background-color: #a0a0a0; border: 1px solid #404040; position: relative; top: -1px"> <div style="height: 300px"> </div> </div> <div id="scheda-storici" style="display:none; width: calc(100% - 2px); height: auto; background-color: #a0a0a0; border: 1px solid #404040; position: relative; top: -1px"> <div style="height: 100px"> </div> </div> </div> 

Here the jsfiddle: https://jsfiddle.net/fgt9odc8/

I strongly recommend looking at the jsfiddle because the effect of the scroll is not observed here with the snippet. In the code the page starts with

      $(document).scrollTop(30);

and when click a new button (to open new tab) the scrollTop position change :(

I hope you can help me and sorry for my english.

Answer 1

I solve blocking scroll of body with overflow-y: hidden before slideUp of old tab and removing this css after slideDown of new tab. Also i saved position of window before to change the tab and making a scroll to this (old) position after the new tab is show.

I hope that this answer can help someone...

$(document).ready(function() {

      $(document).scrollTop(30);

      //se viene cliccato un altro pulsante "SCHEDA"
      $('#button-scheda-mappa, #button-scheda-vulcani, #button-scheda-storici').on('click', function() {
        var mostra_scheda = ($(this).attr('id')).substr(7);
        var blocca_scroll= $(window).scrollTop();   //posizione della finestra prima del cambio scheda      
        $('body, html').css('overflow-y','hidden'); //blocco lo scroll del body

        $('#scheda-mappa, #scheda-vulcani, #scheda-storici').not('#' + mostra_scheda).slideUp(800); ////chiudo le altre voci aperte e le "pulisco" (eccetto quella appena cliccata)
        $('#' + mostra_scheda).delay(500).slideDown(800, function(){
            $(window).scrollTop(blocca_scroll);
            $('body, html').removeAttr('style');    //sblocco anche la possibilità di scrollare la pagina
        });); //mostro la tendina del form (che sarebbe l'elemento successivo a quello appena cliccato)

      });
      //
    });