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

2021-02-08JavaScript,JavaScript 取得

javascript-get-the-scroll-position

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;
};

2021-02-08JavaScript,JavaScript 取得

Posted by Yousuke.U