JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<div class="container">
    <div class="spacer"></div>
</div>

<div class="container2">
    
</div>

CSS

.container {
    width: 200px;
    height: 200px;
    overflow: auto;
    margin: 0;
    border: 1px solid black;
}

.spacer {
    width: 500px;
    height: 500px;
}

JavaScript

var container = document.querySelector('.container');
var container2 = document.querySelector('.container2');

function isOverflowingVertically(element) {
    return element.scrollHeight > element.clientHeight;
}

function isOverflowingHorizontally(element) {
    return element.scrollWidth > element.clientWidth;
}

function getVerticalScrollbarWidth () {
	var dummy = document.createElement('div');
    dummy.setAttribute('style', 'position: fixed; top: -1000px; width: 50px; height: 50px; overflow: auto;')
    dummy.innerHTML = '<div style="width: 100px; height: 100px;"></div>';
    document.body.appendChild(dummy);
    var verticalScrollbarWidth = dummy.offsetWidth - dummy.clientWidth;
    document.body.removeChild(dummy);
    return verticalScrollbarWidth;
}

function getHorizontalScrollbarHeight () {
	var dummy = document.createElement('div');
    dummy.setAttribute('style', 'position: fixed; top: -1000px; width: 50px; height: 50px; overflow: auto;')
    dummy.innerHTML = '<div style="width: 100px; height: 100px;"></div>';
    document.body.appendChild(dummy);
    var verticalScrollbarWidth = dummy.offsetHeight - dummy.clientHeight;
    document.body.removeChild(dummy);
    return verticalScrollbarWidth;
}

console.log(getVerticalScrollbarWidth());
console.log(getHorizontalScrollbarHeight());