JavaScript | スクロールの位置を取得する

2021-02-012021-02-08JavaScript 取得,JavaScript

JavaScriptで現在のスクロールの位置（高さ、ポジション）を取得する方法のサンプルです。

See the Pen JavaScript | get scroll position by yochans (@yochans) on CodePen.

スクロールの位置を取得する方法（addEventListener）

addEventListener()で「scroll」を指定して、スクロール時のイベント実行。
window.pageYOffsetで縦のスクロール位置を取得する方法です。

window.addEventListener("scroll", scroll);

function scroll(){
	scroll_position = window.pageYOffset;
	console.log( scroll_position );
}

無名関数で記述する場合

window.addEventListener('scroll', function() {
	scroll_position = window.pageYOffset;
	console.log( scroll_position );
});

アロー関数で記述する場合

window.addEventListener("scroll", () => {
	scroll_position = window.pageYOffset;
	output.innerHTML = scroll_position;
	
});

スクロールの位置を取得する方法（onscroll）

onscrollイベントを利用して、スクロール時のイベント実行。
window.pageYOffsetで縦のスクロール位置を取得する方法です。

window.onscroll = scroll;

function scroll(){
	scroll_position = window.pageYOffset;
	console.log( scroll_position );
}

無名関数で記述する場合

window.onscroll = function() {
	scroll_position = window.pageYOffset;
	console.log( scroll_position );
};

アロー関数で記述する場合

window.onscroll = () => {
	scroll_position = window.pageYOffset;
	output.innerHTML = scroll_position;
};