javascript - スクロール後に水平方向の Web サイトのアンカーへの scrollLeft が乱雑になる

Question

私は現在、横スクロールのポートフォリオ サイトである新しい Web プロジェクトに取り組んでいます。ほぼ完了です。想定どおりに機能しないコードが 1 つだけあります。

画面の左上に、参照された ID にスムーズにスクロールするアンカー リンクを含むハンバーガー メニューがあります。問題は、ページをスクロールするとすぐに、スクロール距離がめちゃくちゃになり、スクロール距離が完全にめちゃくちゃになることです。

ページへのリンクは次のとおりです: http://www.timbrack.de/#portfolio

エラーを再現するには、バーガーメニューをクリックして「about」をクリックします

次のように、コンテナーが水平方向に収まるように空白: nowrap を使用します。

body {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  height: 100%;
  width: auto;
  position: relative;
}

.content_container {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  padding: 100px 100px 100px 100px;
  box-sizing: border-box;
  position: relative;
  min-height: 500px;
  vertical-align:top;
}

スクロールのスクリプトは次のようになります。

$(".scroll").bind("click",function(event){
        var $anchor = $(this);

        $("body").stop().animate({
            scrollLeft: $($anchor.attr("href")).offset().left
        }, 1200);
        event.preventDefault();
});

スクロール距離がめちゃくちゃになる理由がわかりましたか？

乾杯ティム