How to get the width of scroll bar using JavaScript ?

Read

Discuss

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.

<!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> 

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.

<!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> 

Output:

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

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 05 Sep, 2019

Difference Between indexOf and findIndex function of array

How to convert JSON data to a html table using JavaScript/jQuery ?

How to get the width of scroll bar using JavaScript ?

Please Login to comment...