ブラウザの通常スクロールの場合
ブラウザ(ウィンドウ)のスクロールの場合は、
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)にいると発火しない。
ページを表示、更新した際に、該当要素のスクロール位置が初期位置から少しでもずれた場所にあると発火する。
位置が変わる度にも発火する。初期位置に戻っても発火する。