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).
use it like this, $('#my_div1'). hasScrollBar(); // returns true if there's a `vertical` scrollbar, false otherwise..
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.
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.
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
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;
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With