<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()
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.