スクロールイベントを使いスクロール量を取得してみた件

2020.12.17
javascript

Javascriptを使いページ全体と要素内の縦・横のスクロール量を取得する方法をJavascriptとjQueryもそれぞれまとめました。

1. 縦スクロール
2. 横スクロール
- 2.1. Javascript 要素内の横スクロール量を取得
- 2.2. jQuery　要素内の横スクロール量を取得

縦スクロール

Javascript 要素内のスクロール量を取得

スプレッド演算子を使いHTML collectionの展開したケースです。
モダンブラウザで対応しています。

const scrollCover = document.getElementsByClassName('list');

[... document.getElementsByClassName('list')].forEach(function (ele) {
  ele.addEventListener('scroll', function () {
    getScrollY(this);
  })
});

function getScrollY(e) {
  const scrollTop = e.scrollTop;
  console.log(scrollTop)
}

Javascript 要素内のスクロール量を取得その2

for文での展開です。ieを含めたブラウザで有効になります。

const scrollCover = document.getElementsByClassName('list');

for (let i = 0; i < scrollCover.length; i++) {
  scrollCover[i].addEventListener('scroll',function() {
    getScrollY(this);
  });
}

function getScrollY(e) {
  const scrollTop = e.scrollTop;
  console.log(scrollTop)
}

Javascript ウインドウのスクロール量を取得

ウィンドウのスクロール量を取得する方法です。Webサイトでスクロール時にアニメーションを入れるときなどによく使用します。

window.addEventListener('scroll', function(e) {
  let scrollVal = window.pageYOffset;
  console.log('window: ' + scrollVal);
});

jQuery 要素内のスクロール量を取得

jQueryを使用し要素内のスクロール量を取得します。

const $scrollCover = $('.list');

$scrollCover.each(function (i, e) {
  $(e).on('scroll', function () {
    $getScrollY($(this));
  })
})

function $getScrollY(e) {
  const scrollTop = e.scrollTop();
  console.log(scrollTop)
}

jQuery ウインドウのスクロール量を取得

jQueryを使用しウィンドウのスクロール量を取得します

$(window).on('scroll', function() {
  const scrollTop = $(this).scrollTop();
  console.log(scrollTop);
})

横スクロール

Javascript 要素内の横スクロール量を取得

コンテンツの横スクロールを取得します。

const scrollCover = document.getElementsByClassName('list')[0];

scrollCover.addEventListener('scroll', function() {
  getScrollX(this);
})

function getScrollX (e) {
  const scrollLeft = e.scrollLeft;
  console.log(scrollLeft)
}

jQuery　要素内の横スクロール量を取得

jqueryを使用しコンテンツ内の横スクロールを取得します。

const scrollCover = $('.list');

scrollCover.on('scroll', function() {
  getScrollXJq($(this));
});

function getScrollXJq(e) {
  const scrollLeft = e.scrollLeft();
  console.log(scrollLeft);
}

前の記事

NodeJsとMySQLを連携してみた件 2020.06.29
次の記事

マウスイベントをまとめてみた件 2020.12.20