How to know if the scrollbar is active and its size?

Question

I have a menu that opens based on the coordinates X and Y of click, but when it was opened at the ends it ended up extrapolating the layout, I arranged it, but when the scrollbar lateral is active it ends up extrapolating some pixels (probably in the height also), as the window.innerWidth does not take the difference of scroll size, example...

when scroll is not active window.innerWidth = 1420

when scroll is active window.innerWidth = 1420

That is, depending on the platform the scroll on average can have a width of up to 15/20px, need to detect when the Scrollbar is active and when active know its size to subtract this difference, it is possible?

Answer 1

Know if you have scroll

To find out if the window has scroll compare document height to window size.

View this code and change the height of the div to see who identifies when you have scroll:

let doc = $(document).height();
let win = $(window).height();

if(doc > win){
  console.log('Tem scroll');
} else {
  console.log('Não tem scroll');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div style="background-color: lightgreen; height: 500px;"></div>

If you want with pure Javascript:

let body = document.body, html = document.documentElement;

let docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);

let winHeight = window.innerHeight;

if (docHeight > winHeight){
  console.log('Tem Scroll');
} else {
  console.log('Não tem Scroll');
}

<div style="background-color: lightgreen; height: 100px;"></div>

Get the width of scroll

Through this reply I saw that it is possible to create a div hidden, other div within it with scroll and through the difference of the two know what is the width of the scroll used by the browser.

That is the code:

function getScrollbarWidth() {
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

    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(getScrollbarWidth());