ビューポートはブラウザに表示されているエリアの幅・高さ、ページの幅・高さは実際に存在するエリア（スクロールで表示される場所全て）のサイズとなります。
ページの右下までスクロールした状態で、ビューポートのサイズにスクロールした量を足すと、それぞれページのサイズが取得されているのが分かります。
データ取得
更新日：2024-04-22
＞ ページ全体のスクロール位置の取得
【Sample】
window.scrollX//水平（X軸）方向にスクロールした位置
window.scrollY//垂直（Y軸）方向にスクロールした位置
ページの左上を基準に上下左右のスクロール量を取得します。
左上を基準にスクロールした量が表示されるので「画面下から現れたら何らかの処理をする」といった場合は、ブラウザの高さも考慮しないといけません。
コード例
JavaScript
//addEventListenerのscrollイベントでスクロールの動きを取得します
window.addEventListener('scroll', function(){
//x軸（横）の位置
let scroll_x = window.scrollX;
//y軸（縦）の位置
let scroll_y = window.scrollY;
});動作サンプル【sample】
コード例 - Sample
HTML
<div class="example">
<p>x（横）軸のスクロール量 = <span id="example-1"></span></p>
<p>y（縦）軸のスクロール量 = <span id="example-2"></span></p>
</div>CSS
▶X軸のスクロールを分かり易くするため、画面幅最小値を1200pxで制限しています
<style>
body{
min-width:1200px;;
}
</style>JavaScript
<script>
document.addEventListener('mousemove', function(e){
let mouse_sc_x = e.screenX; //x軸（横）のスクロール量
let mouse_sc_y = e.screenY; //y軸（縦）のスクロール量
//表示
document.getElementById('example-1').innerText = mouse_sc_x;
document.getElementById('example-2').innerText = mouse_sc_y;
});
</script>動作例 - Sample
▶スクロールや（ブラウザの）リサイズをすると結果が表示されます ▶X軸はブラウザを1200pxより小さい幅にしてから確認してみてください
X軸（横）のスクロール量 = 0
Y軸（縦）のスクロール量 = 0
参考 - Sample
▶ページの右下までスクロールした状態で、X軸はブラウザを1200pxより小さい幅にしてから確認してみてください
ビューポートの幅【0】 + X軸スクロール量【0】 = ページの幅【0】
ビューポートの高さ【0】 + Y軸スクロール量【0】 = ページの高さ【0】
ビューポートはブラウザに表示されているエリアの幅・高さ、ページの幅・高さは実際に存在するエリア（スクロールで表示される場所全て）のサイズとなります。
ページの右下までスクロールした状態で、ビューポートのサイズにスクロールした量を足すと、それぞれページのサイズが取得されているのが分かります。