element.clientHeight不考虑滚动条高度

Question

我希望能够检测滚动条高度并执行this article here中描述的其他各种事情，因为当滚动条存在时，clientHeight和offsetHeight之间存在差异。

然而，在Chrome / Mac和Safari / Mac中，我看到clientHeight和offsetHeight报告相同的值，即下方有水平滚动条的事件。

这里是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>

我误解了什么？谢谢！