Check whether HTML element has scrollbars using JavaScript Last Updated : 18 Dec, 2023 Comments Improve Suggest changes Like Article Like Report 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 propertyUsing scrollTop and scrollLeft propertiesUsing element.scrollWidth and .clientWidth propertySelect 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: Using scrollTop and scrollLeft propertiesSelect 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: Comment More infoAdvertise with us Next Article Check whether HTML element has scrollbars using JavaScript P PranchalKatiyar Follow Improve Article Tags : JavaScript Web Technologies Similar Reads How to identify which element scroll is being used using JavaScript ? To identify which element is being scrolled using JavaScript, you can attach scroll event listeners to specific elements. This allows you to determine which element's scroll event is active, enabling tailored responses or interactions based on the particular element being scrolled.Using Scroll event 3 min read How to get the Width of Scroll bar using JavaScript? Given an HTML document, the task is to get the width of the scrollbar using JavaScript. Approach:Create an element (div) containing a scrollbar.OffsetWidth defines the width of an element + scrollbar width.ClientWidth defines the width of an element.So scrollbar can be defined as width = offsetWidth 3 min read How to Scroll to an Element Inside a Div using JavaScript? To scroll to an element within a div using JavaScript, set the parent div's scrollTop`to the target element's offsetTop. This method allows smooth navigation within a scrollable container. Below are the methods to scroll to an element inside a Div using JavaScript:Table of Content Using scrollIntoVi 3 min read How to Get and Set Scroll Position of an Element using JavaScript ? In this article, we will learn how to get and set the scroll position of an HTML element using JavaScript.Approach: We will be using the HTML DOM querySelector() and addEventListener() methods and the HTML DOM innerHTML, scrollTop and scrollLeft properties.We create an HTML div element with an id of 3 min read How to Create Scroll Indicator using HTML CSS and JavaScript ? Scroll Indicator is a progress bar that represents how much a page has been scrolled. When we scroll down the bar fills up and when we scroll up the bar amount reduces. Approach: Now, we will create a basic webpage with text to enable scrolling and then use JavaScript to make the scroll indicator wo 3 min read How to get the position of scrollbar using JavaScript ? JavaScript is an amazing language and there are many functions available through which we can access any element of the HTML page through javascript. There are some simple techniques to get the scrollbar position that are discussed below: Approach 1: Whenever the function getScroll() is encountered, 3 min read How to create scrollable element in Tailwind without a scrollbar ? Creating a scrollable element without a visible scrollbar in Tailwind CSS can provide a sleeker UI, reducing clutter and maintaining a clean aesthetic while still allowing users to interact with content via scrolling. To create a scrollable element in Tailwind CSS without a visible scrollbar, apply 6 min read How to get the height of scroll bar using JavaScript ? To get the height of scroll bar we could use different approaches. In this article, we are given an HTML document and the task is to get the height of the scrollbar using JavaScript. Following are the different approaches to solving this problem which are discussed below: Table of Content Using Cont 3 min read How to Disable Scrolling Temporarily using JavaScript? Disabling scrolling temporarily using JavaScript means preventing users from scrolling a webpage during specific interactions, such as when a modal is open or a loading screen is displayed. Scrolling can be disabled using JavaScript using 2 methods:Table of ContentUsing window.onscroll functionSetti 2 min read How to disable scrollbar without hiding using jQuery ? A vertical or horizontal bar that is located at the corners of the page helps us to scroll the pages or containers upwards, downwards or sideways. So, the process is to disable the scroll bar but the scroll bar should be visible. In this article, we will disable the scroll bar by using .on() functio 2 min read Like