<div id="main">
  <button type="button" onclick="window.switch()">Switch</button>
  <div id="output"></div>
</div>

#main {
  width: 100%;
  height: 200px;
  background-color: lightblue;
}

html {
  background-color: yellow;
  border: 10px solid gray;
  padding: 20px;
  height: 100px;
  overlow: hidden;
}

body {
  border: 2px solid red;
}

const root = document.documentElement
const main = document.getElementById('main')
let short = true


const calc = () => document.getElementById('output').innerHTML = [
[
  'clientHeight',
  'clientWidth',
  'clientLeft',
  'clientTop',
  'scrollHeight',
  'scrollWidth',
  'scrollLeft',
  'scrollTop',
  'offsetHeight',
  'offsetWidth',
  'offsetLeft',
  'offsetTop'
]
  .map(prop => `root.${prop} = ${root[prop]}`)
  .join('<br/>'),
['left', 'top', 'right', 'bottom', 'x', 'y', 'width', 'height']
  .map(prop => `root.getBoundingClientRect().${prop} = ${root.getBoundingClientRect()[prop]}`)
  .join('<br/>'),
['scrollX', 'scrollY', 'innerHeight', 'innerWidth', 'outerHeight', 'outerWidth']
  .map(prop => `window.${prop} = ${window[prop]}`)
  .join('<br/>')
].join('<div style="height: 1rem;"></div>')

calc()

window.onscroll = calc

window.switch = function() {
  short = !short
  if (short) {
    root.style.height = '100px'
    main.style.height = '200px'
  }
  else {
    root.style.height = '1000px'
    main.style.height = '2000px'
  }
  calc()
}