How to check if a scrollbar is visible? - GeeksforGeeks

28 Oct, 2021
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.  
html
<!DOCTYPE html><html> <head>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></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>
Output:  
 
Example 2:  
html
<!DOCTYPE html><html> <head>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </script>    <script>        $(function() {            alert('Div 1 has scrollbar: ' + $('#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>
Output:  
 
 
ruhelaa48
jQuery-Misc
Picked
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Form validation using jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
jQuery | children() with Examples
How to get the ID of the clicked button using JavaScript / jQuery ?
How to redirect to a particular section of a page using HTML or jQuery?
Roadmap to Become a Web Developer in 2022
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Installation of Node.js on Linux
Convert a string to an integer in JavaScript