0

I was hoping to be able to detect scrollbar heights and do other various things described in this article here, given the difference between clientHeight and offsetHeight when scrollbars are present.

However, in Chrome/Mac and Safari/Mac, I am seeing clientHeight and offsetHeight reporting the same value, event when there's a horizontal scrollbar beneath.

Here's the JSFiddle: http://jsfiddle.net/gLomLpxs/

<div id="wrapper" style="height:100px">
    <p>Inner stuff.</p>
</div>

<style>
    div {
        width: 100px;
        height: 100px;
        background: gray;
        overflow: auto;
        padding: 5px;
    }

    p {
        width:200px;
        background: red;
    }
</style>

<script>
    var wrapEl = document.getElementById('wrapper');

    wrapEl.addEventListener('scroll', function(e) {
        console.log(
            wrapEl.offsetHeight, 
            wrapEl.clientHeight,
            wrapEl.style.height);
    });
</script>

What am I misunderstanding? Thanks!

Community
  • 1
  • 1
Eric Nguyen
  • 40,312
  • 4
  • 25
  • 31
  • 2
    Both Chrome and Safari use the OSX style floating scrollbars do they not? Floating means they don't take up space, they are displayed _above_ the content. – Sergiu Paraschiv Sep 17 '14 at 13:59
  • That makes sense! Such a straightforward answer to an overly-convoluted question. Thanks. – Eric Nguyen Sep 17 '14 at 22:54

0 Answers0