탭 전환 등을 통해 내용 내용의 높이를 변경합니다. 디스플레이:none로 전환할 때 이 전환된 내용 아래의 위치에서 스크롤 위치를 유지합니다.

나는 이런 느낌으로 라벨에서 선택하고 내용을 바꾸고 싶다.
이해하기 어렵지만 이 위쪽은 라벨이고 아래쪽은 내용이다.

그리고 이 탭에는 어떤 것이든 내용을 바꿀 수 있는 내용이 위아래로 있습니다.
아래쪽 화살표

그러니까

이런 느낌.
그럼 문제는
/첫 번째 높이만 적어
· display: block 및 display:none로 교환
두 개.
높이가 변하지 않으면 디스플레이로 전환해도 문제없습니다.
또는 고도의 변화가 있으면display가 아니라opacity와visibility로 제거하고 내용 자체가 가장 큰 일반적인 배치를 제외하고 absolute로 중첩하면 된다.그러나 이렇게 되면 아래의 라벨부터 내용까지 이윤이 흐트러진다.
그렇다면 디스플레이에서 내용의 존재에 따라 이윤을 통일할 수밖에 없다.
그래서 이 방침만 있으면 문제가 있다.
우선 위의 탭으로 전환하면 스크롤 위치가 고정되어도 문제가 없습니다.
하지만 아래 탭으로 전환하면 문제가 있습니다.
위의 그림에서 보듯이 첫 번째 레이블에 표시되는 컨텐트의 높이가 작고 두 번째 레이블에 표시되는 컨텐트의 높이가 크면 첫 번째 → 두 번째 레이블을 전환할 때 동일한 스크롤 위치의 값이면 두 번째 레이블에서 컨텐트의 가운데 왼쪽이 됩니다.
(참고로 크롬의 느낌이 잘 보완되어 아래 탭을 눌렀을 때의 외관으로 바뀌었다. 실제로 크롬도 위치에서 벗어난다...?)
그렇다면 이럴 때의 대책 방법.

    var $tabItems = $(".voice__tabItem");

    $tabItems.on("click", function() {

      // 現時点で選ばれている箱の高さ
      var beforeHeight = $(".voice__box.is-selected").height();

      // ここからタブクリックでコンテンツ入れ替える記述

      // タブをクリックしたらその何番目のタブか
      var $tab = $(this).parent();
      var $item = $tab.find(".voice__tabItem");
      var index = $item.index($(this));

      // タブをクリックしたらそのタブにクラス付与、上のタブも下のタブも
      $tabItems.removeClass("is-selected");
      $(".voice__tab--top .voice__tabItem")
        .eq(index)
        .addClass("is-selected");
      $(".voice__tab--bottom .voice__tabItem")
        .eq(index)
        .addClass("is-selected");
      // タブの順番と同じボックスにクラス付与
      $(".voice__box").removeClass("is-selected");
      $(".voice__box")
        .eq(index)
        .addClass("is-selected");

      // ここまでタブクリックでコンテンツ入れ替える記述

      // タブ押した後に選ばれた箱の高さ
      var afterHeight = $(".voice__box.is-selected").height();

      // 前に選ばれていた箱と選ばれた箱の高さの差
      var changeHeight = afterHeight - beforeHeight;

      // Safariでタブクリック時にスクロール位置がずれてしまう(macOSとiOSどちらも)
      // Windowsで見たらIEもEdgeもだめでした
      // 箱の高さが変わるが、その際にwindowの一番上からのスクロールトップの値がずれてしまうため。
      // おそらくChromeは良い感じに補完してくれている
      // Chrome以外の時を判定する記述
      if (!_browser.chrome) { // ←ここはなんかChromeの判定をうまく書いてください
        // クリックしたタブの親がクラスにvoice__tab--bottomを持っていたら
            // 上のタブはvoice__tab--topとクラスふってる、
            // 上のタブならスクロール位置補完してあげる必要がないので
        if (
          $(this)
            .parent()
            .hasClass("voice__tab--bottom")
        ) {
          // タブクリックして箱が新しくなった時のスクロール位置を保存
          var scrtop = $(window).scrollTop();
          // 上記の上記のスクロール位置から箱の変化分を足す、かかる時間は0秒
          $("html,body").animate(
            { scrollTop: scrtop + changeHeight },
            { duration: 0 }
          );
        }
      }
    });

우선 탭을 눌러 내용을 바꾸는 기술이 적혀 있다.
그런 다음 를 클릭하여 컨텐트를 교체하기 전과 후에 각 컨텐트의 높이를 가져옵니다.beforeHeight 및 AfterHeight앞뒤 값의 차이를 취하다.changeHeight그런 다음 컨텐트를 교체한 후 스크롤 위치를 찾습니다.scrTopjQuery의 animate에서.
내용 교체 후 스크롤 위치 scrTop+내용 교체 전후 높이 차이changeHeight를 추가하여 이동합니다.
예:
위 그림에서 첫 번째 레이블의 컨텐트 높이는 1200이고 두 번째 레이블의 컨텐트 높이는 2000입니다.beforeHeight 1200, afterHeight 2000.changeHeight는 800입니다.
첫 번째 레이블을 선택한 상태에서 아래쪽 레이블의 두 번째 레이블을 누릅니다.
아래 탭을 누르기 전에 스크롤 위치를 3000으로 설정하면 움직이지 않기 때문에 두 번째 탭의 내용으로 바꾸더라도 스크롤 위치는 3000입니다.scrTop는 3000입니다.
그렇다면 상기 그림에서 보듯이 스크롤 위치가 3000을 유지하면 두 번째 내용을 표시한 상태에서 아래 탭을 클릭할 수 있는 위치에 있지 않고 내용 중의 위치에 스크롤 위치가 3000이다.
따라서 똑같아 보이기 위해서는 이 벗어난 높이change Height를 엇갈려야 한다.그래서 3000+800=3800.
첫 번째 컨텐트를 표시한 상태에서 아래 탭을 누른 화면의 모양과 동일한 모양 (이번에는 3000) 을 유지하고 두 번째 컨텐트로 교체하기 위해 순간적으로 3800 으로 스크롤 위치를 설정해야 합니다.