jsでページスクロールを禁止しているのでページが揺れません

    適用シナリオ: ページ内に複数のスクロール バーがある場合、またはマウス スクロールが必要なモジュールがある場合、ブラウザのスクロール イベントを無効にする必要があり、ページは揺れません。

1. スクロール バーのスタイルをグローバルに設定する (scss)

注: スクロール バーの幅を設定しない場合は、ページのスクロールが無効になっているときにスクロール バーの幅を計算する必要があります。そうしないと、ページが揺れる原因になります。

::-webkit-scrollbar {
  width: 7px; // 固定滚动条宽度
}
::-webkit-scrollbar-thumb {
  border-radius: 14px;
  -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
  background: rgba(144, 147, 153, 0.3);
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
  border-radius: 0;
  background: none;
}

2. ページのスクロールを無効にします。ページ位置を「固定」に設定し、指定された高さにページを固定し、要件に従ってページ幅を設定します。

注: スクロール バーの幅はページの幅から差し引く必要があります。そうしないと、ページが揺れてユーザー エクスペリエンスに影響を与えます。

let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let dom = document.getElementById("app");
dom.style.position = "fixed";
dom.style.top = "-" + scrollTop + "px";
dom.style.width = "calc(100% - 7px)"; // 7px为滚动条宽度

3. ページスクロールを無効にしない

let dom = document.getElementById("app");
let scrollTop = Math.abs(parseFloat(dom.style.top));
dom.style.position = "";
dom.style.top = "";
dom.style.width = "100%";
if (document.body) {
  document.body.scrollTop = scrollTop;
}
if (document.documentElement) {
  document.documentElement.scrollTop = scrollTop;
}