javascript でスクロールイベントを取得する

ブラウザの通常スクロールの場合

ブラウザ（ウィンドウ）のスクロールの場合は、
window にイベントリスナーを追加する。

window.addEventListener('scroll', myFunction)

サンプルコード

ウィンドウ（window）のスクロールと、要素（divなど）のスクロールだと、
見るプロパティが違うので注意。

<header id="scrollMonitor">
	window.scrollY: 0px, window.scrollX: 0px
</header>
<div class="ajustSize"></div>


<script type="text/javascript">

	(function() {

		let monitor = document.getElementById('scrollMonitor')
		if (!monitor) {
			return
		}
		window.addEventListener('scroll', (e) => {
			monitor.innerHTML = `window.scrollY: ${window.scrollY}px, window.scrollX: ${window.scrollX}px`
		})
	}())

</script>

サンプルコード（css）

<style rel="stylesheet">
	body, html {
		padding: 0;
		margin: 0;
		position: relative;
	}
	header {
		position: fixed;
		top: 0;
		left: 0;
	}
	.ajustSize {
		width: 3000px;
		height: 3000px;
	}
</style>

div などの要素のスクロールの場合

スクロールしている要素にイベントリスナーを追加する。

let target = document.getElementById(ID)
target.addEventListener('scroll', myFunction)

サンプルコード

scrollY, scrollX ではなく、
scrollTop, scrollLeft になっていることに注意。

<div class="ajustPadding">
	<div id="scroll" class="scroll">
		<div class="ajustSize">
			scroll in div
		</div>
	</div>
	<div id="scrollMonitor">
		target.scrollTop: 0px, target.scrollLeft: 0px
	</div>
</div>


<script type="text/javascript">

	(function() {

		let target = document.getElementById('scroll')
		let monitor = document.getElementById('scrollMonitor')
		if (!target || !monitor) {
			return
		}
		target.addEventListener('scroll', (e) => {
			monitor.innerHTML = `target.scrollTop: ${scroll.scrollTop}px, target.scrollLeft: ${scroll.scrollLeft}px`
		})

	}())

</script>

サンプルコード（css）

<style rel="stylesheet">
	body, html {
		padding: 0;
		margin: 0;
		position: relative;
	}
	.ajustSize {
		width: 3000px;
		height: 3000px;
	}
	.ajustPadding {
		padding: 100px;
	}
	.scroll {
		position: relative;
		width: 300px;
		height: 300px;
		overflow: scroll;
		background: #eee;
	}
</style>

共通: イベント発火のタイミング

スクロールのイベントは、
ページを表示、更新した際に、該当要素のスクロール位置が初期位置（y: 0px, x: 0px）にいると発火しない。
ページを表示、更新した際に、該当要素のスクロール位置が初期位置から少しでもずれた場所にあると発火する。
位置が変わる度にも発火する。初期位置に戻っても発火する。