参考サイト
脱jQuery!ページの最下部までスクロールしたかを判定するjavaScript
https://tech.arms-soft.co.jp/entry/2021/04/28/090000
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 );
});
}