JSFiddle - React, Tailwind, and code Playground

by jnaO

HTML

<div id='box1'>
<div id='box2'>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
</div>
</div>
<p id="w"></p>
<p id="iw"></p>
<p id="scroll-width"></p>
<p id="true-width"></p>

CSS

#box1 {
    width:100px;
    height:100px;
    overflow: scroll;
    box-sizing: content-box;
}

#box2 {
    max-width:200px;
    display: inline-block;
    background-color:#aaa;
}

/* to measure the scrollbar */
.scrollbar-measure {
    width: 100px;
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
}

JavaScript

// using the technique found @ http://davidwalsh.name/detect-scrollbar-width

$('#w').text("width is: "+$('#box1').width());
$('#iw').text("inner width is: "+$('#box1').innerWidth());

// If inner box is larger than outer box, create the measurement node
if ( $('#box2').height() > $('#box1').height() ) {

    var scrollDiv = document.createElement("div");
    scrollDiv.className = "scrollbar-measure";
    document.body.appendChild(scrollDiv);

    // Get the scrollbar width
    var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
    
    // Delete the DIV 
    document.body.removeChild(scrollDiv);

    $('#scroll-width').text("scrollbar width is: "+scrollbarWidth);
    $('#true-width').text("true div width is: "+($('#box1').width()-scrollbarWidth));
}