scroll

スクロール（イベント）

意味ページがスクロールされたときのイベント。

scrollとは？

ユーザーがページをスクロールするときに発火するイベント。

scrollの具体的な使い方

スクロール位置を表示する

<div id="scroll-info" style="position: fixed; top: 10px; right: 10px; background: rgba(0,0,0,0.7); color: white; padding: 10px;">スクロール位置: 0px</div>
<div style="height: 2000px;">スクロールしてください</div>
<script>
function updateScrollPosition() {
  const scrollY = window.scrollY;
  document.getElementById('scroll-info').textContent = `スクロール位置: ${scrollY}px`;
}

window.addEventListener('scroll', updateScrollPosition);
</script>

ページがスクロールされるたびに、現在のスクロール位置（垂直方向）を画面右上に表示します。スクロール可能なコンテンツを作成するために、高さ2000pxの要素を配置しています。

scrollに関するよくある質問

Q. scrollイベントの使い方は？

A. scrollイベントは、window.addEventListener('scroll', callback)の形で使用します。callbackにはスクロール時に実行したい処理を記述します。

Q. scrollイベントの注意点は？

A. scrollイベントは非常に頻繁に発火するため、パフォーマンスに大きな影響を与える可能性があります。デバウンスやスロットルを使用して、イベントの発火回数を制御することが重要です。

Q. スクロール位置の取得方法は？

A. window.scrollYまたはwindow.pageYOffsetを使用して垂直方向のスクロール位置を、window.scrollXまたはwindow.pageXOffsetを使用して水平方向のスクロール位置を取得できます。

scrollが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのscrollやdrop、dispatchEvent()、mouseup、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。