JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div>

</div>
<p>
  the red bar is equal in width with the page scrollbar. check on multiple browsers.
</p>

SCSS

// calc scrollbar width and store it in a css root variable
:root{
  --scrollbar-width: calc(100vw - 100%);
}

// ensure the body as enough height to show a scrollbar
body {
  height: 3000px;
  margin: 0;
}

// set a div's width equal to scrollbar. Gave it some color to be easily spotted
div {
  width: var(--scrollbar-width);
  height: 100vh;
  background: red;
  color: white;
  font-size: 12px;
  display: inline-block;
  vertical-align: top;
}

// just an info message
p {
  display: inline-block;
  margin: 0 0 0 20px;
  vertical-align: top;
  line-height: 1;
}

// the actual value is inserted into the div with jQuery function $('div').width();

JavaScript

$('div').text($('div').width());