https://idea-hack.com/courses/lets-understand-the-methods-and-properties-related-to-browser-operations-that-are-often-used-in-javascript/lessons/check-the-scroll-amount-of-a-window-with-javascript-window-scrollxwindow-scrolly/
https://idea-hack.com/courses/lets-understand-the-methods-and-properties-related-to-browser-operations-that-are-often-used-in-javascript/lessons/check-the-scroll-amount-of-a-window-with-javascript-window-scrollxwindow-scrolly/

JavaScriptでウィンドウのスクロール量を調べるwindow.scrollX・window.scrollYプロパティの使い方

ウィンドウのスクロール量を調べる

JavaScriptで、閲覧者がページのどの部分までスクロールしているかを調べるにはwindow.scrollXwindow.scrollYを使うと便利です。

メソッド

プロパティ意味返り値
window.scrollX水平方向のスクロール量を取得数値
window.scrollY垂直方向のスクロール量を取得数値
ウィンドウのスクロール量を調べるプロパティ

サンプルコード

サンプルコードとして、ボタンを押すと現在のスクロール量を出力するサンプルコードを紹介します。

Output
Pug
button#button.mb-4.text-center ボタン
	#targetText
SCSS
#button {
	--background-color: #fff;
	--color: #576574;
	--transition: all 0.3s;
	margin-bottom: 10px;
	background-color: var(--background-color);
	padding: 10px;
	color: var(--color);
	border: 1px solid #576574;
	cursor: pointer;
	width: 120px;
	transition: var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}
JavaScript
const targetText = document.getElementById( 'targetText' );
document.getElementById('button').addEventListener('click', onClickAction);


/** ボタンをクリックと関数を実行 */
function onClickAction() {
	const userScrollX = window.scrollX;
	const userScrollY = window.scrollY;
	targetText.textContent = `現在の水平方向のスクロール量は${userScrollX}で、垂直方向のスクロール量は${userScrollY}です。`;
}

ちなみに、サンプルコードの様にfocus();を付与すると、別窓で開いた時にウィンドウが必ずアクティブになり、画面に表示される様になります。

インストラクター
コメント

コメントを残す