JavaScript - 子要素のスクロール位置が上端/下端に達した時に親要素のスクロールを制御する方法

方法1: イベントリスナーを使用してスクロール位置を監視する方法

// 親要素のDOM要素を取得
const parentElement = document.getElementById('parentElement');
// 子要素のDOM要素を取得
const childElement = document.getElementById('childElement');
// スクロール位置が上端に達した時の処理
childElement.addEventListener('scroll', function() {
  if (childElement.scrollTop === 0) {
    parentElement.style.overflow = 'hidden';
  } else {
    parentElement.style.overflow = 'auto';
  }
});
// スクロール位置が下端に達した時の処理
childElement.addEventListener('scroll', function() {
  if (childElement.scrollHeight - childElement.scrollTop === childElement.clientHeight) {
    parentElement.style.overflow = 'hidden';
  } else {
    parentElement.style.overflow = 'auto';
  }
});

方法2: Intersection Observerを使用してスクロール位置を監視する方法

// 親要素のDOM要素を取得
const parentElement = document.getElementById('parentElement');
// 子要素のDOM要素を取得
const childElement = document.getElementById('childElement');
// Intersection Observerの設定
const observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    if (entry.isIntersecting) {
      parentElement.style.overflow = 'auto';
    } else {
      parentElement.style.overflow = 'hidden';
    }
  });
});
// 子要素を監視対象に登録
observer.observe(childElement);

これらの方法を使うと、子要素のスクロール位置が上端または下端に達した時に親要素のスクロールを制御することができます。適用したい方法を選んで、該当するコードを使用してください。また、親要素と子要素のDOM要素のIDを適切に設定してください。