How to get the height of scroll bar using JavaScript ?

Given an HTML document and the task is to get the height of the scrollbar using JavaScript. Following are the different approaches to solve this problem which are discussed below:

Approach 1: In this approach, a div element is created that contains a scrollbar. To get the height of the scroll bar the offsetHeight of div is subtracted from the clientHeight of div.

  • OffsetHeight = Height of an element + Scrollbar Height.
  • ClientHeight = Height of an element.
  • Height of scrollbar = offsetHeight  – clientHeight.

Example: This example implements the above approach.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>  
<html>  
    
<head>  
      <style
        h1 { 
            color:green; 
        
        #geek1 {  
            width: 300px;  
            overflow-y:hidden; 
            border:1px solid black; 
            white-space: nowrap;
        
        #geek2 { 
            font-size: 20px;  
            font-weight: bold; 
        
        #geek4 { 
            font-size: 24px;  
            font-weight: bold; 
            color: green; 
        
    </style
</head>  
    
<body>  
     <center>
    <h1>GeeksforGeeks</h1
        
    <p id = "geek2"></p
        
    <div id="geek1"
        Bokeh is a Python interactive data 
        visualization. It renders its plots
        using HTML and JavaScript. 
    </div
        
    <br
        
    <button onclick = "geek3()"
        Click Here 
    </button
        
    <p id = "geek4"></p
        
    <script
        var element = document.getElementById('geek1'); 
        var el_up = document.getElementById('geek2'); 
        var el_down = document.getElementById('geek4'); 
            
        el_up.innerHTML = "To get " 
                    + "the height of the scrollbar."; 
            
        function geek3() { 
            el_down.innerHTML = element.offsetHeight  
                        - element.clientHeight + "px"; 
        
    </script
    </center
</body>  
</html>

chevron_right


Output:

Before clicking on the button:



After clicking on the button:

Approach 2: In this approach, an outer div element is created and in this outer div element, an inner div element is also created. To get the height of the scroll bar the height of the inner div is subtracted from the outer div.

Example 2: This example implements the above approach.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>  
<html>  
    
<head>  
         
    <style
        h1 { 
            color:green; 
        
        #geek1 {  
            width: 300px;  
            overflow-y:hidden; 
            border:1px solid black; 
            white-space: nowrap;
        
        #geek2 { 
            font-size: 20px;  
            font-weight: bold; 
        
        #geek4 { 
            font-size: 24px;  
            font-weight: bold; 
            color: green; 
        
    </style
</head>  
    
<body>  
     <center>
    <h1>GeeksforGeeks</h1
        
    <p id = "geek2"></p
        
    <div id="geek1"
        <div id="geek5"
            Bokeh is a Python interactive data 
            visualization. It renders its plots
            using HTML and JavaScript. 
        </div>
    </div
        
    <br
        
    <button onclick = "geek3()"
        Click Here 
    </button
        
    <p id = "geek4"></p
        
    <script
        var element = document.getElementById('geek1'); 
        var el_up = document.getElementById('geek2'); 
        var el_down = document.getElementById('geek4'); 
            
        el_up.innerHTML = "To get " 
                    + "the height of the scrollbar."; 
            
        function geek3() { 
            var child = document.querySelector("#geek5"); 
            var scroll = child.parentNode.offsetHeight
                        - child.offsetHeight;
            el_down.innerHTML = scroll + "px"; 
        
    </script
    </center
</body>  
</html>

chevron_right


Output:

Before clicking on the button:

After clicking on the button:

full-stack-img




My Personal Notes arrow_drop_up

Small things always make you to think big

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.