CSS Overflow

by Hristiyan Dodov

HTML

<html>
  <body style="overflow: hidden;">
    <p>
      element clientHeight: <span id="clientHeight"></span><br>
      element scrollHeight: <span id="scrollHeight"></span><br>
    </p>
    <div id="elem" style="background: lavender;">
      <ul>
        <li style="margin: 15px 0;">foo</li>
        <li style="margin: 15px 0; transform: translateY(70px);">bar</li>
        <li style="margin: 15px 0;">baz</li>
      </ul>
    </div>
  </body>
</html>

JavaScript

var elem = document.getElementById('elem')
document.getElementById('clientHeight').innerHTML = elem.clientHeight
document.getElementById('scrollHeight').innerHTML = elem.scrollHeight