How to check if a scrollbar is visible?

A scrollbar is a widget in which some content is put and that content can be scrolled by a user in a prefixed direction. To check whether a scrollbar is visible or not, we can make use of our own custom function.

Example 1: This example shows a simple code snippet which can be used to check if the horizontal or vertical scrollbar is visible or not.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <script src=
</script>
    <!--styling our elements-->
    <style>
        #geek {
            background-color: green;
            overflow: auto;
            float: left;
        }
          
        #inner {
            width: 150px;
            height: 250px;
        }
    </style>
    <script>
        function isScrollable(el) {
          
            /*The scrollTop() method sets or returns the 
            vertical scrollbar position for the selected elements*/
            var y1 = el.scrollTop; 
            el.scrollTop += 1;
            var y2 = el.scrollTop;
            el.scrollTop -= 1;
            var y3 = el.scrollTop;
            el.scrollTop = y1;
          
            /*The scrollLeft() method returns the horizontal 
            scrollbar position for the selected elements.*/
            var x1 = el.scrollLeft; 
            el.scrollLeft += 1;
            var x2 = el.scrollLeft;
            el.scrollLeft -= 1;
            var x3 = el.scrollLeft;
            el.scrollLeft = x1;
  
            //returns true or false accordingly
            return {
                horizontallyScrollable: x1 !== x2 || x2 !== x3, 
                verticallyScrollable: y1 !== y2 || y2 !== y3
            }
        }
  
        function check(id) {
            /*the data is JSON type, convert it to string and then
            check the element with given id for scrollbar*/
            alert(JSON.stringify(isScrollable(document.getElementById(id)))); 
              
        }
    </script>
</head>
  
<body>
    <div id="geek" style="height: 100px;">
        <div id="inner"></div>
    </div>
  
    <!--check the element with id 'geek'
        for scrollbar using our custom function-->
    <button onclick="check('geek')">
        <br>scrollable</button
</body>
  
</html>

chevron_right


Output:



Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  </script>
    <script>
        $(function() {
            alert('Div 1 has scroolbar: ' + $('#geek1').hasScrollBar());
            alert('Div 2 has scrollbar: ' + $('#geek2').hasScrollBar());
        });
  
        (function($) {
            $.fn.hasScrollBar = function() {
                return this.get(0).scrollHeight > this.height();
                /*The element will display a scrollbar 
                 if the scroll height is greater than the client height*/
            }
        })(jQuery);
    </script>
</head>
  
<body>
    <div id="geek1"
         style="width: 100px; 
                height:100px; 
                overflow:auto;"
         class="my_class">
        
        Welcome to the world of Geeks!! How many times were you 
      frustrated while looking out for a good collection of 
      programming/algorithm/interview questions? What did you 
      expect and what did you get? This portal has been created 
      to provide well written, well thought and well explained
      solutions for selected questions.
        <br/>
        <br/>
    </div>
  
    <br>
    <br>
  
    <div id="geek2"
         style="width: 300px;
                height:300px; 
                overflow:auto;" 
         class="my_class">
        * No scrollbar
    </div>
</body>
  
</html>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.