Check whether HTML element has scrollbars using JavaScript

Last Updated : 18 Dec, 2023

Given an HTML document, the task is to identify whether a particular element has scrollbars or not. In this article, we are going to check whether the HTML element has scrollbars using JavaScript.

Below are the different approaches to check whether HTML element has scrollbars using JavaScript:

Table of Content

Using element.scrollWidth and .clientWidth property
Using scrollTop and scrollLeft properties

Using element.scrollWidth and .clientWidth property

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

Example: This example implements the above approach.

html

<!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() { 
                let div = document.getElementById('div'); 
                let hs = div.scrollWidth > div.clientWidth; 
                let vs = div.scrollHeight > div.clientHeight; 
                
                document.getElementById('GFG').innerHTML 
                        = "Horizontal Scrollbar - " + hs 
                        +"<br>Vertical Scrollbar - " + vs; 
            } 
        </script> 
    </center> 
</body> 

</html>

Output:

11111111111111

Using scrollTop and scrollLeft properties

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: This example using the approach discussed above.

html

<!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'; 
                
                let res = !! element[dir]; 
                
                if (!res) { 
                    element[dir] = 1; 
                    res = !!element[dir]; 
                    element[dir] = 0; 
                } 
                return res; 
            } 
            
            function GFG_Fun() { 
                let div = document.getElementById('div'); 
                let hs = checkScrollBar(div, 'horizontal'); 
                let vs = checkScrollBar(div, 'vertical'); 
                
                document.getElementById('GFG').innerHTML 
                        = "Horizontal Scrollbar - " + hs 
                        +"<br>Vertical Scrollbar - " + vs; 
            } 
        </script> 
    </center> 
</body> 

</html>

Output:

222222

Check whether HTML element has scrollbars using JavaScript

PranchalKatiyar

Improve

Article Tags :

Check whether HTML element has scrollbars using JavaScript

Using element.scrollWidth and .clientWidth property

Using scrollTop and scrollLeft properties

Similar Reads

Thank You!

What kind of Experience do you want to share?