Element.prototype.scrollIntoView() メソッドを使用する

2024-04-02

スクロール後に要素が表示されているかどうかを確認する方法

JavaScript

要素の getBoundingClientRect() メソッドを使用する

このメソッドは、要素の座標とサイズに関する情報を含むオブジェクトを返します。このオブジェクトを使用して、要素のウィンドウ内の位置とサイズを確認できます。

function isElementVisible(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

IntersectionObserver API を使用する

この API は、要素が画面内に出入りするタイミングを監視する機能を提供します。

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 要素が表示された
    } else {
      // 要素が非表示になった
    }
  });
});

observer.observe(element);

jQuery

jQuery.visible() メソッドを使用する

このメソッドは、要素が画面内に表示されているかどうかを判定します。

if ($element.visible()) {
  // 要素が表示された
} else {
  // 要素が非表示になった
}

このイベントは、スクロールが発生するたびに発生します。

$(window).scroll(() => {
  if ($element.is(':visible')) {
    // 要素が表示された
  } else {
    // 要素が非表示になった
  }
});

CSS

position: sticky を使用する

このプロパティは、要素をスクロールしても画面内に固定することができます。

.element {
  position: sticky;
  top: 0;
}

@media クエリを使用する

このクエリを使用して、画面サイズに応じて要素の表示を切り替えることができます。

@media (max-width: 768px) {
  .element {
    display: none;
  }
}

どの方法を使用するかは、要件とプロジェクトのニーズによって異なります。

JavaScript

function isElementVisible(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

const element = document.querySelector('.element');

// スクロール後に要素が表示されているかどうかを確認する
window.addEventListener('scroll', () => {
  if (isElementVisible(element)) {
    console.log('要素が表示されました');
  } else {
    console.log('要素が非表示になりました');
  }
});

jQuery

$(window).scroll(() => {
  if ($('.element').visible()) {
    console.log('要素が表示されました');
  } else {
    console.log('要素が非表示になりました');
  }
});

CSS

.element {
  position: sticky;
  top: 0;
}

@media (max-width: 768px) {
  .element {
    display: none;
  }
}

注意:

getBoundingClientRect() メソッドは、IE 9 以前ではサポートされていません。
IntersectionObserver API は、IE 11 以前ではサポートされていません。

スクロール後に要素が表示されているかどうかを確認するその他の方法

Element.prototype.offsetParent プロパティを使用する

このプロパティは、要素の親要素のオフセット位置を取得します。

function isElementVisible(element) {
  const offsetParent = element.offsetParent;
  const offsetTop = element.offsetTop;
  const offsetLeft = element.offsetLeft;
  return (
    offsetTop >= 0 &&
    offsetLeft >= 0 &&
    offsetTop + element.offsetHeight <= offsetParent.offsetHeight &&
    offsetLeft + element.offsetWidth <= offsetParent.offsetWidth
  );
}

Element.prototype.scrollIntoView() メソッドを使用する

このメソッドは、要素を画面内にスクロールします。

const element = document.querySelector('.element');

// スクロール後に要素が表示されているかどうかを確認する
window.addEventListener('scroll', () => {
  if (!isElementVisible(element)) {
    element.scrollIntoView();
  }
});

$(window).scroll(() => {
  const offset = $('.element').offset();
  if (offset.top >= 0 && offset.left >= 0) {
    console.log('要素が表示されました');
  } else {
    console.log('要素が非表示になりました');
  }
});