JavaScript | スクロールをトリガーにしたイベントを実装する方法
Javascriptでスクロールをトリガーにした発火イベントの実装方法を紹介しています。
スクロールをトリガーにしたイベントの実装サンプル
JavascriptのaddEventListener()を使ったスクロールをトリガーにしたイベントの実装サンプルとサンプルコードになります。
See the Pen JavaScript | Events triggered by Full screen mode by yochans (@yochans) on CodePen.
イベントの発火を確認するための出力用に<p>タグをひとつ設置しています。
<p id="output">0</p>サンプルではスクロール可能な領域を確保する為に、CSSにて<body>の高さを5000pxに指定しています。
また、出力用の<p>タグはpositionプロパティに「 fixed」を指定して固定しています。
body {
height: 5000px;
}
#output {
position: fixed;
top: 0;
font-size: 60px;
color: #4169e1;
margin: 10px;
}スクロールを取得するにはwindowに対してquerySelector()にて「scroll」を指定します。
出力用の<p>タグは変数名は「output」を指定しています。
let output = document.querySelector('#output');
window.addEventListener('scroll', () => {
output.innerHTML = window.pageYOffset;
});