導入：なぜWindow.scrollYが重要なのか？
Webサイト制作をしていると、「ユーザーがどれくらいスクロールしたか知りたい」「ある地点までスクロールしたらボタンを表示させたい」といった要望がよく出てきます。そんな時に欠かせないのがWindow.scrollYというプロパティです。これを使うことで、現在のページが上からどれだけ離れているかをピクセル単位で正確に取得できます。スクロール連動型のアニメーションや、トップに戻るボタンの実装には必須の知識です。
基礎知識：Window.scrollYとは？
Window.scrollYは、ブラウザの表示領域（ビューポート）が、ドキュメントの最上部から垂直方向に何ピクセルスクロールされているかを示す数値（浮動小数点数）を返します。
似たものに「window.pageYOffset」がありますが、現在ではWindow.scrollYを使うのが標準的です。読み取り専用のプロパティなので、値を取得することはできますが、直接代入してスクロール位置を操作することはできない点に注意しましょう。
実装：スクロール位置を取得する仕組み
スクロール位置を取得するには、windowオブジェクトのscrollイベントを利用します。ユーザーがスクロールするたびに処理が実行されるため、その中でWindow.scrollYの値をチェックすることで、動的なインターフェースを実現します。
サンプルプログラム：スクロール量に合わせてメッセージを表示する
以下のコードをHTMLファイルのscriptタグ内にコピー＆ペーストすると、ページを200ピクセル以上スクロールした瞬間にコンソールへメッセージが表示される仕組みを確認できます。
// スクロールイベントを監視する
window.addEventListener('scroll', () => {
// 現在のスクロール位置を取得
const scrollPosition = window.scrollY;
// 200ピクセル以上スクロールしたかどうかを判定
if (scrollPosition > 200) {
console.log('200ピクセル以上スクロールしました！');
// ここにヘッダーの固定やボタン表示などの処理を書く
} else {
console.log('上部に近いです');
}
});
応用・注意点：現場で役立つポイント
1. パフォーマンスへの配慮：スクロールイベントは、ユーザーが少し動かすだけで短時間に何度も実行されます。もし重い処理（DOMの大量生成など）を記述するとサイトがカクつく原因になります。この場合、「スロットリング」や「デバウンス」という手法で処理の回数を間引くのが現場の定石です。
2. 互換性：Window.scrollYは主要なモダンブラウザで全てサポートされています。古いブラウザを考慮する必要がある場合は念のため「window.pageYOffset || document.documentElement.scrollTop」と書くこともありますが、現在の開発環境であればWindow.scrollYのみで問題ありません。
3. 単位：返ってくる値は単位のない数値（ピクセル）です。CSSに適用する際は「window.scrollY + ‘px’」のように単位を付与することを忘れないようにしましょう。
まずはこのプロパティを使って、コンソールにスクロール量を出力するところから始めてみてください。動きが目に見えると、実装の幅がぐっと広がりますよ！