How to get the width of scroll bar using JavaScript ?

Given an HTML document and the task is to get the width of the scrollbar using JavaScript. There are two different approach to solve this problem which are discussed below:

Approach 1:

  • Create an element (div) containing scrollbar.
  • OffsetWidth defines the width of an element + scrollbar width.
  • ClientWidth defines the width of an element.
  • So scrollbar can be defined as width = offsetWidth – clientWidth.

Example 1: This example implements the above approach.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
  
<head
    <title
        How to get the width of scroll
        bar using JavaScript ?
    </title>
      
    <style>
        body {
            text-align:center;
        }
        h1 {
            color:green;
        }
        #div {
            width:200px; 
            height:150px; 
            overflow:auto;
            margin:auto;
            text-align:justify;
            border:1px solid black;
        }
        #GFG_UP {
            font-size: 17px; 
            font-weight: bold;
        }
        #GFG_DOWN {
            font-size: 24px; 
            font-weight: bold;
            color: green;
        }
    </style>
</head
  
<body
      
    <h1>GeeksforGeeks</h1>
      
    <p id = "GFG_UP"></p>
      
    <div id="div">
        JavaScript has stormed the web technology and
        nowadays small software ventures to fortune
        500, all are using node js for web apps. 
        Recently wordpress.com has rewritten its
        dashboard in javascript, paypal also chose to
        rewrite some of its components in java script.
        Be it google/twitter/facebook, javascript is
        important for everyone. It is used in 
        applications like single page applications,
        Geolocation APIs, net advertisements etc.
    </div>
      
    <br>
      
    <button onclick = "GFG_FUN()">
        click here
    </button>
      
    <p id = "GFG_DOWN"></p>
      
    <script>
        var element = document.getElementById('div');
        var el_up = document.getElementById('GFG_UP');
        var el_down = document.getElementById('GFG_DOWN');
          
        el_up.innerHTML = "Click on the button to get "
                    + "the width of the scrollbar.";
          
        function GFG_FUN() {
            el_down.innerHTML = element.offsetWidth 
                        - element.clientWidth + "px";
        }
    </script
</body
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Approach 2:

  • Create an outer div element.
  • Create a div inside outer div, call it inner div.
  • Subtract the width of inner div from the outer div to get the scrollbar width.

Example 2: This example implements the above approach.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
  
<head
    <title
        How to get the width of scroll
        bar using JavaScript ?
    </title>
      
    <style>
        body {
            text-align:center;
        }
        h1 {
            color:green;
        }
        .outer {
            width:200px; 
            height:150px; 
            overflow-y:auto;
            margin:auto;
            text-align:justify;
            border:1px solid black;
        }
        #GFG_UP {
            font-size: 17px; 
            font-weight: bold;
        }
        #GFG_DOWN {
            font-size: 24px; 
            font-weight: bold;
            color: green;
        }
    </style>
</head
  
<body
    <h1>GeeksforGeeks</h1>
      
    <p id = "GFG_UP"></p>
      
    <div class="outer">
        <div class="inner">
            JavaScript has stormed the web technology and
            nowadays small software ventures to fortune
            500, all are using node js for web apps. 
            Recently wordpress.com has rewritten its
            dashboard in javascript, paypal also chose to
            rewrite some of its components in java script.
            Be it google/twitter/facebook, javascript is
            important for everyone. It is used in 
            applications like single page applications,
            Geolocation APIs, net advertisements etc.
        </div>
    </div>
      
    <br>
      
    <button onclick = "GFG_FUN()">
        click here
    </button>
      
    <p id = "GFG_DOWN"></p>
      
    <script>
        var element = document.getElementById('div');
        var el_up = document.getElementById('GFG_UP');
        var el_down = document.getElementById('GFG_DOWN');
          
        el_up.innerHTML = "Click on the button to get "
                    + "the width of the scrollbar.";
          
        function GFG_FUN() {
            var child = document.querySelector(".inner");
            var scroll = child.parentNode.offsetWidth - child.offsetWidth;
            el_down.innerHTML = scroll + "px";
        }
    </script
</body
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.