Как заблокировать прокрутку и высоту тела перед slideUp () элемента и удалить css после slideDown () нового элемента?- Jquery

Question

Уверяю вас, я схожу с ума.Я пробовал сотни изменений, но не могу решить эту проблему.

На практике у меня есть страница с 3 вкладками, но одновременно может отображаться только одна вкладка.Если вы нажмете кнопку, чтобы просмотреть новую вкладку, старая будет slideUp, и после этого появится новая вкладка с slideDown.

Проблема в том, что вкладки имеют разныевысоты, поэтому, когда вкладка исчезает, на несколько мгновений окно будет иметь другую высоту, и произойдет автоматическая прокрутка.

Я хочу избежать этой прокрутки, но я не знаю, как ...

$(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>

Здесь jsfiddle: https://jsfiddle.net/fgt9odc8/

Я настоятельно рекомендую посмотреть на jsfiddle , потому что эффектсвитка здесь не наблюдается с фрагментом.В коде страница начинается с

      $(document).scrollTop(30);

и при нажатии новой кнопки (чтобы открыть новую вкладку) изменяется положение scrollTop :(

Я надеюсь, что вы можете помочь мне, и извините за мойанглийский.

Answer 1

Я решаю блокировку scroll тела с overflow-y: hidden перед слайдом старой вкладки и удалением этого css после слайда вниз новой вкладки.Также я сохранил позицию window, прежде чем изменить вкладку и сделать прокрутку до этой (старой) позиции после показа новой вкладки.

Я надеюсь, что этот ответ может кому-то помочь ...

$(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)

      });
      //
    });