CSS Overflow

by Hristiyan Dodov

HTML

<html style="overflow: scroll; border: 1px solid red;">
  <body style="overflow: scroll; border: 1px solid red;">
    <p>
      window innerWidth: <span id="innerWidth"></span><br>
      html offsetWidth: <span id="htmlOffsetWidth"></span><br>
      html clientWidth: <span id="htmlClientWidth"></span><br>
      body offsetWidth: <span id="bodyOffsetWidth"></span><br>
      body clientWidth: <span id="bodyClientWidth"></span><br>
    </p>
    <div style="width: 120vw; height: 120vh; background: lavender;">
      large content
    </div>
  </body>
</html>

JavaScript

document.getElementById('htmlOffsetWidth').innerHTML = document.documentElement.offsetWidth
document.getElementById('htmlClientWidth').innerHTML = document.documentElement.clientWidth
document.getElementById('bodyOffsetWidth').innerHTML = document.body.offsetWidth
document.getElementById('bodyClientWidth').innerHTML = document.body.clientWidth
document.getElementById('innerWidth').innerHTML = window.innerWidth