Determing the dimensions of the browser's scroll bar

Question

Determing the dimensions of the browser's scroll bar

I have come across a query regarding the calculation of browser scrollbar sizes. However, my focus is on understanding how the solution in the npm package called scrollbar-wdith actually works. Can someone provide an explanation for this?

To give some context, here is the relevant code written in (.coffee):

scrollbarWidth = null

getScrollbarWidth = (recalculate = false) ->
  return scrollbarWidth if scrollbarWidth? and not recalculate

  return null if document.readyState is 'loading'

  div1 = document.createElement 'div'
  div2 = document.createElement 'div'

  div1.style.width = div2.style.width = div1.style.height = div2.style.height = '100px'
  div1.style.overflow = 'scroll'
  div2.style.overflow = 'hidden'

  document.body.appendChild div1
  document.body.appendChild div2

  scrollbarWidth = Math.abs div1.scrollHeight - div2.scrollHeight

  document.body.removeChild div1
  document.body.removeChild div2

  scrollbarWidth

javascript coffeescript

Answer 1

Answer №1

I made some adjustments to the code by simplifying the core concept.

<html>
<head>
</head>
<body>
</body>
<script>
  var scrollbarWidth;

  scrollbarWidth = null;

  getScrollbarWidth = function(recalculate) {
    var div1, div2;
    div1 = document.createElement('div');
    div2 = document.createElement('div');
    div1.id = "div1";
    div2.id = "div2";
    div1.style.width = div2.style.width = div1.style.height = div2.style.height = '100px';
    div1.style.overflow = 'scroll';
    div2.style.overflow = 'hidden';
    document.body.appendChild(div1);
    document.body.appendChild(div2);
    scrollbarWidth = Math.abs(div1.scrollHeight - div2.scrollHeight);
    alert(scrollbarWidth);
    return scrollbarWidth;
  };

  getScrollbarWidth();

</script>
<html>

By creating two identical divs with and without a scrollbar, the script then calculates their scrollHeight property values to determine the scrollbar's height. This information can be found at http://www.w3schools.com/jsref/prop_element_scrollheight.asp.

The scrollHeight property returns the entire height of an element in pixels, including padding but excluding border, scrollbar, or margin.

The difference between the scrollHeights provides the vertical scrollbar's actual height. For example, if div2 has a scrollHeight of 100px (=height) while div1 only measures 83px, Chrome displays a scrollbar with a height of 17px.

Feel free to ask if you need further clarification.

Answer 2

I made some adjustments to the code by simplifying the core concept.

<html>
<head>
</head>
<body>
</body>
<script>
  var scrollbarWidth;

  scrollbarWidth = null;

  getScrollbarWidth = function(recalculate) {
    var div1, div2;
    div1 = document.createElement('div');
    div2 = document.createElement('div');
    div1.id = "div1";
    div2.id = "div2";
    div1.style.width = div2.style.width = div1.style.height = div2.style.height = '100px';
    div1.style.overflow = 'scroll';
    div2.style.overflow = 'hidden';
    document.body.appendChild(div1);
    document.body.appendChild(div2);
    scrollbarWidth = Math.abs(div1.scrollHeight - div2.scrollHeight);
    alert(scrollbarWidth);
    return scrollbarWidth;
  };

  getScrollbarWidth();

</script>
<html>

By creating two identical divs with and without a scrollbar, the script then calculates their scrollHeight property values to determine the scrollbar's height. This information can be found at http://www.w3schools.com/jsref/prop_element_scrollheight.asp.

The scrollHeight property returns the entire height of an element in pixels, including padding but excluding border, scrollbar, or margin.

The difference between the scrollHeights provides the vertical scrollbar's actual height. For example, if div2 has a scrollHeight of 100px (=height) while div1 only measures 83px, Chrome displays a scrollbar with a height of 17px.

Feel free to ask if you need further clarification.

Answer 3

Answer №2

Check out this concise snippet that also utilizes a CSS custom property, --scrollbar, to set the pixel size of the scrollbar (if your browser is compliant with the specification):

(function(elem, body){
  elem.style.display = 'inline-block';
  elem.style.position = 'absolute';
  elem.style.height = '0';
  elem.style.overflow = 'scroll';
  body.appendChild(elem);
  body.style.setProperty('--scrollbar', elem.offsetWidth + 'px');
  body.removeChild(elem);
})(document.createElement('scrollbartester'), document.body);

Answer 4

Check out this concise snippet that also utilizes a CSS custom property, --scrollbar, to set the pixel size of the scrollbar (if your browser is compliant with the specification):

(function(elem, body){
  elem.style.display = 'inline-block';
  elem.style.position = 'absolute';
  elem.style.height = '0';
  elem.style.overflow = 'scroll';
  body.appendChild(elem);
  body.style.setProperty('--scrollbar', elem.offsetWidth + 'px');
  body.removeChild(elem);
})(document.createElement('scrollbartester'), document.body);

Determing the dimensions of the browser's scroll bar

Answer №1

Answer №2

Similar questions

Supplier for a module relying on data received from the server

Utilizing JSONP in Google Chrome for JavaScript

List the attributes that have different values

Utilizing React Router V4 to Render Dual Components on a Single Route

If I click on the datalist link option during an ajax append, I would like to be redirected

Receiving a response from xmlHttpRequest that leaves me uncertain

removing an item from a nested array through the use of the filter() method

Using a semicolon right after "id" is recognized as an unexpected token

Are there any tools available for selecting fonts to use in an input form for users?

To ensure the next line only runs after the line above has finished executing, remember that the function is invoked in HTML

Filtering an array of map/key pairs can be done by using various methods to

Update the content of the widget

Struggling to implement a JavaScript dynamic menu on an HTML website and encountering persistent difficulties

What is the best way to specify the data type as double for the onChange Event

Preventing Image Blocking - Efficiently Loading Pages to Avoid Slow Loading (Image Queueing)

JavaScript: Creating an array of images from a directory

Is there a way to have the collapsible content automatically expanded upon loading?

Dealing with Lengthy Requests: Effective Strategies

The functionality of OnPress for React Native Google Places Autocomplete is hindered by its surrounding parent components

Encountering compilation issues with Jest in Vue project, yet the tests are successfully passing