しらべものドット宇宙HTMLコーダーが必死こいて〇〇〇を目指すブログ

【Javascript】ウィンドウの大きさが変わった時・スクロールされた時にそれぞれウィンドウの幅・高さ・スクロール量を検知する方法

参考サイト

脱jQuery!ページの最下部までスクロールしたかを判定するjavaScript
https://tech.arms-soft.co.jp/entry/2021/04/28/090000

スクロールした量を取得する
https://gray-code.com/javascript/get-scroll-amount/#:~:text=%E3%82%92%E6%93%8D%E4%BD%9C%E3%81%99%E3%82%8B-,%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E9%87%8F%E3%82%92%E5%8F%96%E5%BE%97,%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82

Window | MDN
https://developer.mozilla.org/ja/docs/Web/API/Window

'use strict';
{
    // 【検証】起動時の処理
    window.addEventListener('load', () => {
        // 垂直スクロールバーを含むウィンドウ内部の幅
        let width = window.innerWidth;

        // 水平スクロールバーを含むウィンドウ内部の高さ
        let height = window.innerHeight;

        // 垂直のスクロール量
        let scrollY = window.scrollY;

        // 水平のスクロール量
        let scrollX = window.scrollX;

        console.log('width : ' + width + ', height : ' + height + ', Scroll Y : ' + scrollY + ', Scroll X : ' + scrollX );
    });

    // 【検証】ウィンドウサイズが変わった時の処理
    window.addEventListener('resize', () => {
        // 垂直スクロールバーを含むウィンドウ内部の幅
        let width = window.innerWidth;

        // 水平スクロールバーを含むウィンドウ内部の高さ
        let height = window.innerHeight;

        // 垂直のスクロール量
        let scrollY = window.scrollY;

        // 水平のスクロール量
        let scrollX = window.scrollX;

        console.log('width : ' + width + ', height : ' + height + ', Scroll Y : ' + scrollY + ', Scroll X : ' + scrollX );
    });

    // 【検証】スクロールされた時の処理
    window.addEventListener('scroll', () => {
        // 垂直スクロールバーを含むウィンドウ内部の幅
        let width = window.innerWidth;

        // 水平スクロールバーを含むウィンドウ内部の高さ
        let height = window.innerHeight;

        // 垂直のスクロール量
        let scrollY = window.scrollY;

        // 水平のスクロール量
        let scrollX = window.scrollX;

        console.log('width : ' + width + ', height : ' + height + ', Scroll Y : ' + scrollY + ', Scroll X : ' + scrollX );
    });
}