Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I check if a scrollbar is visible?

Is it possible to check the overflow:auto of a div?

For example:

HTML

<div id="my_div" style="width: 100px; height:100px; overflow:auto;" class="my_class">    * content </div> 

JQUERY

$('.my_class').live('hover', function (event) {     if (event.type == 'mouseenter')     {          if( ...  if scrollbar visible ? ... )          {             alert('true'):          }          else          {             alert('false'):          }     }  }); 

Sometimes is the content short (no scrollbar) and sometimes long (scrollbar visible).

like image 341
Peter Avatar asked Jan 27 '11 09:01

Peter


People also ask

How can I tell if a scrollbar is visible in a div?

use it like this, $('#my_div1'). hasScrollBar(); // returns true if there's a `vertical` scrollbar, false otherwise..

How do you check if scrollbar is visible in react?

You can use an element ref to check if the scrollWidth is greater than the current width (or height for vertical scroll). The ref might not update scroll properties with useEffect hence why you need state in the dependencies array. Plus you will likely want to add a window resize event listener to run the same code.

How do I inspect scroll bar?

The scrollbar is part of the body element, you will not be able to 'inspect' a non-HTML element. To see CSS styles applied to scrollbar, just inspect element that scrollbar belongs to.


2 Answers

a little plugin for it.

(function($) {     $.fn.hasScrollBar = function() {         return this.get(0).scrollHeight > this.height();     } })(jQuery); 

use it like this,

$('#my_div1').hasScrollBar(); // returns true if there's a `vertical` scrollbar, false otherwise.. 

tested working on Firefox, Chrome, IE6,7,8

but not working properly on body tag selector

demo


Edit

I found out that when you have horizontal scrollbar that causes vertical scrollbar to appear, this function does not work....

I found out another solution... use clientHeight

return this.get(0).scrollHeight > this.get(0).clientHeight; 
like image 150
Reigel Avatar answered Sep 21 '22 10:09

Reigel


You can do this using a combination of the Element.scrollHeight and Element.clientHeight attributes.

According to MDN:

The Element.scrollHeight read-only attribute is a measurement of the height of an element's content, including content not visible on the screen due to overflow. The scrollHeight value is equal to the minimum clientHeight the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element padding but not its margin.

And:

The Element.clientHeight read-only property returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.

clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present).

Therefore, the element will display a scrollbar if the scroll height is greater than the client height, so the answer to your question is:

function scrollbarVisible(element) {   return element.scrollHeight > element.clientHeight; } 
like image 26
Ajedi32 Avatar answered Sep 17 '22 10:09

Ajedi32