White Space
WebLife

【Javascript】要素内で一番上・一番下までスクロールしたかを判定する

  • Javascript

指定した要素内で、スクロールした時に一番上もしくは一番下まで来たかどうかを判定します。

コード

Javascript

/**
 * 一番上なら top、一番下なら bottom、その他は scrolling の文字列を返す
 * 
 * @param {UIEvent} event
 * @returns {String} 'top' | 'bottom' | 'scrolling'
 */
const getScrollVerticalPosition = e => {
  const {
    scrollHeight, scrollTop, clientHeight
  } = e.target;

  const isScrollTop = scrollTop === 0;
  const isScrollBottom = scrollHeight - clientHeight === scrollTop;
  
  if (isScrollTop) {
    return 'top';
  } else if (isScrollBottom) {
    return 'bottom';
  } else {
    return 'scrolling';
  }
}

UIEventオブジェクトのtargetプロパティには、スクロール中の要素情報が含まれているので、それを元にして判定を行います。

  • scrollTop … 要素のスクロール位置。一番上なら0。
  • scrollHeight … 要素のスクロールしているコンテンツ部分の高さ
  • clientHeight … 要素の高さ

使い方

スクロールできる.scroll-area要素に対して使ってみます。console を見ると文字列が返ってきます。

const elem = document.querySelector('.scroll-area');
elem.addEventListener('scroll', e => {
  const scrollPosition = getScrollVerticalPosition(e);
  // ログに出力
  console.log(scrollPosition);
});

<- 'top' | 'bottom' | 'scrolling' のいずれかが返る

jQuery の場合

$('.scroll-area').on('scroll', function(e) => {
  const scrollPosition = getScrollVerticalPosition(e);
  // ログに出力
  console.log(e);
});