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 JavaScript Tutorial JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. It's an interpreted language that executes code line by line, providing more flexibility.JavaScript on Client Side: On the client side, Jav 11 min read Web Development Web development is the process of creating, building, and maintaining websites and web applications. It involves everything from web design to programming and database management. Web development is generally divided into three core areas: Frontend Development, Backend Development, and Full Stack De 5 min read React Interview Questions and Answers React is an efficient, flexible, and open-source JavaScript library that allows developers to create simple, fast, and scalable web applications. Jordan Walke, a software engineer who was working for Facebook, created React. Developers with a JavaScript background can easily develop web applications 15+ min read JavaScript Interview Questions and Answers JavaScript (JS) is the most popular lightweight, scripting, and interpreted programming language. JavaScript is well-known as a scripting language for web pages, mobile apps, web servers, and many other platforms. Both front-end and back-end developers need to have a strong command of JavaScript, as 15+ min read React Tutorial React is a JavaScript Library known for front-end development (or user interface). It is popular due to its component-based architecture, Single Page Applications (SPAs), and Virtual DOM for building web applications that are fast, efficient, and scalable.Applications are built using reusable compon 8 min read Domain Name System (DNS) DNS is a hierarchical and distributed naming system that translates domain names into IP addresses. When you type a domain name like www.geeksforgeeks.org into your browser, DNS ensures that the request reaches the correct server by resolving the domain to its corresponding IP address.Without DNS, w 8 min read NodeJS Interview Questions and Answers NodeJS is one of the most popular runtime environments, known for its efficiency, scalability, and ability to handle asynchronous operations. It is built on Chromeâs V8 JavaScript engine for executing JavaScript code outside of a browser. It is extensively used by top companies such as LinkedIn, Net 15+ min read HTML Interview Questions and Answers HTML (HyperText Markup Language) is the foundational language for creating web pages and web applications. Whether you're a fresher or an experienced professional, preparing for an HTML interview requires a solid understanding of both basic and advanced concepts. Below is a curated list of 50+ HTML 14 min read What is an API (Application Programming Interface) In the tech world, APIs (Application Programming Interfaces) are crucial. If you're interested in becoming a web developer or want to understand how websites work, you'll need to familiarize yourself with APIs. Let's break down the concept of an API in simple terms.What is an API?An API is a set of 10 min read Introduction of Firewall in Computer Network A firewall is a network security device either hardware or software-based which monitors all incoming and outgoing traffic and based on a defined set of security rules it accepts, rejects, or drops that specific traffic. It acts like a security guard that helps keep your digital world safe from unwa 10 min read Like