requestAnimationFrame を使用して親要素のスクロールを子要素のスクロール位置がトップ/ボトムに達したときに防止する方法

2024-05-25

JavaScript で親要素のスクロールを子要素のスクロール位置がトップ/ボトムに達したときに防止する方法

overscroll-behavior プロパティを使用する

CSS の overscroll-behavior プロパティを使用すると、要素がスクロール境界を超えたときのデフォルトの動作を制御できます。このプロパティには、以下の値を指定できます。

auto: デフォルトの動作です。ブラウザによって異なりますが、通常はバウンド効果が適用されます。
contain: 要素のスクロールをそのコンテンツ領域内に制限します。親要素にはスクロールが伝わりません。
none: 要素のスクロールを無効にします。

この問題を解決するには、以下の CSS を子要素に適用します。

.child-element {
  overflow-y: auto; /* 垂直方向のスクロールバーを表示 */
  overscroll-behavior: contain; /* 親要素へのスクロールを伝達しない */
}

この CSS を適用すると、子要素がスクロール境界に達すると、親要素ではなく子要素自身がバウンドします。

JavaScript でイベントリスナーを使用する

overscroll-behavior プロパティがサポートされていない古いブラウザの場合は、JavaScript でイベントリスナーを使用してスクロールイベントを処理する必要があります。

以下のコードは、子要素のスクロール位置がトップまたはボトムに達したときに event.preventDefault() を呼び出して親要素へのスクロールを防止する例です。

const childElement = document.querySelector('.child-element');

childElement.addEventListener('scroll', function(event) {
  const { scrollTop, scrollHeight, offsetHeight } = this;

  if (scrollTop === 0) {
    event.preventDefault();
  } else if (scrollTop + offsetHeight === scrollHeight) {
    event.preventDefault();
  }
});

このコードは、子要素の scrollTop プロパティと scrollHeight プロパティを使用して、スクロール位置を監視します。 scrollTop が 0 の場合は、子要素がトップに達していることを示し、scrollTop + offsetHeight が scrollHeight に等しい場合は、子要素がボトムに達していることを示します。いずれの場合も、event.preventDefault() を呼び出して親要素へのデフォルトのスクロール動作を防止します。

jQuery を使用している場合は、以下のコードを使用して同じ結果を得ることができます。

$('.child-element').on('scroll', function() {
  const scrollTop = $(this).scrollTop();
  const scrollHeight = $(this).get(0).scrollHeight;
  const offsetHeight = $(this).height();

  if (scrollTop === 0) {
    return false;
  } else if (scrollTop + offsetHeight === scrollHeight) {
    return false;
  }
});

このコードは、jQuery の scrollTop(), get(0).scrollHeight, height() メソッドを使用してスクロール位置を監視し、必要に応じてデフォルトのスクロール動作を防止します。

注意事項

overscroll-behavior: contain は、古いブラウザではサポートされない場合があります。このような場合は、JavaScript によるフォールバックソリューションが必要になります。
親要素の高さに制限がない場合、子要素がスクロールしても親要素がスクロールしないようにするには、max-height プロパティを使用して親要素の高さに制限を設定する必要があります。
スクロールバーの外観をカスタマイズしたい場合は、CSS の scrollbar-width, scrollbar-color などのプロパティを使用できます。

これらの方法を組み合わせることで、様々な状況に合わせて親要素のスクロールを効果的に制御することができます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>親要素のスクロール制御</title>
  <style>
    .parent-element {
      height: 200px;
      overflow-y: auto;
      border: 1px solid #ccc;
    }

    .child-element {
      height: 300px; /* 親要素よりも高さを設定 */
      overflow-y: auto;
      /* overscroll-behavior: contain; 古いブラウザではサポートされない可能性があるため、JavaScriptでフォールバック */
    }
  </style>
</head>
<body>
  <div class="parent-element">
    <div class="child-element">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et quam eget ipsum ullamcorper hendrerit. Nullam id magna nec lectus hendrerit interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus eget enim tincidunt, ullamcorper mauris sit amet, mattis nunc. Donec vitae nisl eget quam varius ullamcorper. Suspendisse potenti. Sed in magna eget mi gravida faucibus. Morbi eget ante et lectus faucibus ullamcorper. Nullam eget quam eget ipsum ullamcorper hendrerit. Nullam id magna nec lectus hendrerit interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus eget enim tincidunt, ullamcorper mauris sit amet, mattis nunc. Donec vitae nisl eget quam varius ullamcorper. Suspendisse potenti. Sed in magna eget mi gravida faucibus. Morbi eget ante et lectus faucibus ullamcorper.
    </div>
  </div>

  <script>
    const childElement = document.querySelector('.child-element');

    childElement.addEventListener('scroll', function(event) {
      const { scrollTop, scrollHeight, offsetHeight } = this;

      if (scrollTop === 0) {
        event.preventDefault();
      } else if (scrollTop + offsetHeight === scrollHeight) {
        event.preventDefault();
      }
    });
  </script>
</body>
</html>

説明

このコードは以下の通り動作します。

HTML で、親要素 (parent-element) と子要素 (child-element) を定義します。
親要素には height: 200px; と overflow-y: auto; を設定して、高さを制限し、垂直方向のスクロールバーを表示します。
子要素には height: 300px; を設定して、親要素よりも高さを設定します。
古いブラウザでは overscroll-behavior: contain がサポートされない可能性があるため、JavaScript でフォールバック処理を行います。
JavaScript では、子要素の scroll イベントリスナーを登録します。
イベントリスナー内で、子要素の scrollTop, scrollHeight, offsetHeight を取得します。
scrollTop が 0 の場合は、子要素がトップに達していることを検知し、event.preventDefault() を呼び出して親要素へのスクロールを防止します。

このサンプルコードを参考に、ご自身のニーズに合わせてカスタマイズしてください。

その他の考慮事項

複数のスクロール

その他の親要素のスクロールを子要素のスクロール位置がトップ/ボトムに達したときに防止する方法

touchmove イベントを使用する

タッチデバイスでは、touchmove イベントを使用して子要素のスクロール位置を監視し、必要に応じて親要素へのスクロールを防止できます。

const childElement = document.querySelector('.child-element');

childElement.addEventListener('touchmove', function(event) {
  const { scrollTop, scrollHeight, offsetHeight } = this;
  const { touches } = event;
  const startY = touches[0].clientY;

  if (scrollTop === 0 && startY < this.offsetTop) {
    event.preventDefault();
  } else if (scrollTop + offsetHeight === scrollHeight && startY > this.offsetTop + this.offsetHeight) {
    event.preventDefault();
  }
});

このコードは、touchmove イベントリスナーを使用して、タッチの開始位置と現在のスクロール位置を比較します。子要素がトップに達していて、タッチが子要素の上部から開始された場合は、親要素へのスクロールを防止します。同様に、子要素がボトムに達していて、タッチが子要素の下部から開始された場合は、親要素へのスクロールを防止します。

touchstart と touchend イベントを使用して、子要素内でのタッチの開始と終了を検知し、必要に応じて親要素へのスクロールを防止できます。

const childElement = document.querySelector('.child-element');
let startY = 0;

childElement.addEventListener('touchstart', function(event) {
  const { touches } = event;
  startY = touches[0].clientY;
});

childElement.addEventListener('touchend', function(event) {
  const { scrollTop, scrollHeight, offsetHeight } = this;
  const { touches } = event;
  const endY = touches[0].clientY;

  if (scrollTop === 0 && endY < this.offsetTop) {
    event.preventDefault();
  } else if (scrollTop + offsetHeight === scrollHeight && endY > this.offsetTop + this.offsetHeight) {
    event.preventDefault();
  }
});

requestAnimationFrame APIを使用して、子要素のスクロール位置をアニメーションさせることで、親要素へのスクロールを間接的に防止できます。

const childElement = document.querySelector('.child-element');
let scrollTop = 0;

function animateScroll() {
  const targetScrollTop = childElement.scrollTop;

  if (scrollTop === 0 && targetScrollTop < 0) {
    scrollTop = 0;
  } else if (scrollTop + childElement.offsetHeight === childElement.scrollHeight && targetScrollTop > 0) {
    scrollTop = childElement.scrollHeight - childElement.offsetHeight;
  } else {
    scrollTop = targetScrollTop;
  }

  childElement.scrollTop = scrollTop;
  requestAnimationFrame(animateScroll);
}

animateScroll();

このコードは、requestAnimationFrame を使用して animateScroll 関数を繰り返し呼び出し、子要素の scrollTop プロパティを調整します。 scrollTop が 0 または scrollHeight - offsetHeight に達した場合は、子要素のスクロールを強制的にその位置に設定します。

ライブラリを使用する

iScroll や Overscroll などのライブラリを使用すると、親要素のスクロールを子要素のスクロール位置がトップ/ボトムに達したときに防止する機能を簡単に実装できます。

これらの方法にはそれぞれ利点と欠点があり、状況に応じて最適な方法を選択する必要があります。

利点と欠点の比較