Check whether HTML element has scrollbars using JavaScript

Read

Discuss

Given an HTML document and the task is to identify whether a particular element has scrollBars or not. There are two approaches to solve this problem which are discussed below:

Approach 1:

Select the particular element.
Get the element.scrollWidth and .clientWidth property for horizontal scrollbar.
Calculate the scrollWidth>clientWidth.
If the value comes true then horizontal scrollbar is present else not.
Do the same process to check vertical scrollbar.

Example 1: This example implements the above approach.

<!DOCTYPE HTML>   
<html>   
  
<head>  
    <title>  
         Check whether HTML element has 
         scrollbars using JavaScript 
    </title>     
      
    <style> 
        #div { 
            width:200px; 
            height:150px; 
            overflow:auto;  
            text-align:justify; 
        } 
        #GFG { 
            font-size: 24px; 
            font-weight: bold; 
            color: green; 
        } 
    </style> 
</head>     
  
<body> 
    <center> 
        <h1 style = "color:green;" >   
            GeeksforGeeks   
        </h1> 
          
        <h3> 
            Click on the button to check 
            for the scrollBars 
        </h3> 
      
        <div id="div"> 
            This course is for all those people who want to 
            learn Data Structures and Algorithm from basic 
            to advance level. We don't expect you to have 
            any prior knowledge on Data Structure and  
            Algorithm, but a basic prior knowledge of any 
            programming language ( C++ / Java) will be 
            helpful. This course gives you the flexibility 
            of learning, under this program you can study  
            your course whenever you feel like, you need 
            not hurry or puzzle yourself. 
        </div> 
        <br> 
          
        <button onclick = "GFG_Fun()"> 
            Click Here! 
        </button> 
          
        <div id = "GFG"></div> 
          
        <script> 
            function GFG_Fun() { 
                var div = document.getElementById('div'); 
                var hs = div.scrollWidth > div.clientWidth; 
                var vs = div.scrollHeight > div.clientHeight; 
                  
                document.getElementById('GFG').innerHTML  
                        = "Horizontal Scrollbar - " + hs 
                        +"<br>Vertical Scrollbar - " + vs; 
            } 
        </script>  
    </center> 
</body>   
  
</html> 

Output:

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

Approach 2:

Select the particular element.
Use the scrollTop and scrollLeft properties.
If these are greater than 0, scrollbars are present.
If these are 0, then first set them to 1, and test again to know if getting a result of 1.
Finally, set them back to 0.

Example 2: This example using the approach discussed above.

<!DOCTYPE HTML>   
<html>   
  
<head>  
    <title>  
         Check whether HTML element has 
         scrollbars using JavaScript 
    </title>     
      
    <style> 
        #div { 
            width:200px; 
            height:200px; 
            overflow:none;  
            text-align:justify; 
        } 
        #GFG { 
            font-size: 24px; 
            font-weight: bold; 
            color: green; 
        } 
    </style> 
</head>     
  
<body> 
    <center> 
        <h1 style = "color:green;" >   
            GeeksforGeeks   
        </h1> 
          
        <h3> 
            Click on the button to check 
            for the scrollBars 
        </h3> 
      
        <div id="div"> 
            This course is for all those people who want to 
            learn Data Structures and Algorithm from basic 
            to advance level. We don't expect you to have 
            any prior knowledge on Data Structure and  
            Algorithm, but a basic prior knowledge of any 
            programming language ( C++ / Java) will be 
            helpful.  
        </div> 
        <br> 
          
        <button onclick = "GFG_Fun()"> 
            Click Here! 
        </button> 
          
        <div id = "GFG"></div> 
          
        <script> 
            function checkScrollBar(element, dir) { 
                dir = (dir === 'vertical') ? 
                            'scrollTop' : 'scrollLeft'; 
                  
                var res = !! element[dir]; 
                  
                if (!res) { 
                    element[dir] = 1; 
                    res = !!element[dir]; 
                    element[dir] = 0; 
                } 
                return res; 
            } 
              
            function GFG_Fun() { 
                var div = document.getElementById('div'); 
                var hs = checkScrollBar(div, 'horizontal'); 
                var vs = checkScrollBar(div, 'vertical'); 
                  
                document.getElementById('GFG').innerHTML  
                        = "Horizontal Scrollbar - " + hs 
                        +"<br>Vertical Scrollbar - " + vs; 
            } 
        </script>  
    </center> 
</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 : 20 Sep, 2019

JavaScript RangeError Argument is not a valid code point

How to display div elements using Dropdown Menu in jQuery?

Check whether HTML element has scrollbars using JavaScript

Please Login to comment...