JavaScriptでのスクロールを考慮したウィンドウサイズ

スクロール部分を考慮したウィンドウサイズを取得してみましょう。残念ながら、すべてのブラウザで動作する便利な方法はありません。以下に動作する解決策を記載します。これらを深く理解する必要はなく、そのまま使用してください。

スクロール部分を考慮した高さ:

javascriptlet scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

console.log(scrollHeight);

スクロール部分を考慮した幅:

javascriptlet scrollWidth = Math.max(
  document.body.scrollWidth, document.documentElement.scrollWidth,
  document.body.offsetWidth, document.documentElement.offsetWidth,
  document.body.clientWidth, document.documentElement.clientWidth
);

console.log(scrollWidth);
Задание 1

ボタンがクリックされたとき、スクロール部分を考慮した高さを出力してください。

Задание 2

ボタンがクリックされたとき、スクロール部分を考慮した幅を出力してください。

Задание 3

ボタンがクリックされたとき、スクロールによって隠れている部分の高さを出力してください。