Namespace: Context:getBrowserScrollbarWidth

Context:getBrowserScrollbarWidth

Source:

Methods

getBrowserScrollbarWidth() → {Number}

Returns the current context's scrollbar width. Returns 0 if scrollbar is over content. There are edge cases in which we might want to calculate positions in respect to the actual width of the scrollbar. For example when working with elements with a 100vw width.

This method temporarily inserts three elements into the body while forcing the body to actually show scrollbars, measuring the difference between 100vw and 100% on the body and returns the result.

Source:
Returns:
the width of the body scrollbar in pixels
Type
Number
Example
foobarElement.style.width = `calc(100vw - ${getBrowserScrollbarWidth()}px)`;