How to use element.scrollWidth and .clientWidth property In Javascript
- 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;" > w3wiki </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:
Check whether HTML element has scrollbars using JavaScript
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