JSFiddle - React, Tailwind, and code Playground

by Eugeny Venegrad

HTML

<div id="formactions"></div>

CSS

#formactions {
  background-color: #000;
  width: 100px;
  height: 100px;
  display: block;
}

JavaScript

function getScrollbarWidth() {
        var outer = document.createElement("div");
        outer.style.visibility = "hidden";
        outer.style.width = "100px";
        document.body.appendChild(outer);
        
        var widthNoScroll = outer.offsetWidth;
        // force scrollbars
        outer.style.overflow = "scroll";
        
        // add innerdiv
        var inner = document.createElement("div");
        inner.style.width = "100%";
        outer.appendChild(inner);        
        
        var widthWithScroll = inner.offsetWidth;
        
        // remove divs
        outer.parentNode.removeChild(outer);
        
        return widthNoScroll - widthWithScroll;
    }

console.log()

document.getElementById("formactions").style.right = getScrollbarWidth()+"px";