How to get the width of scroll bar using JavaScript ? - GeeksforGeeks

05 Sep, 2019
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:
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
Remove elements from a JavaScript Array
How to get character array from string in JavaScript?
How to get selected value in dropdown list using JavaScript ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?