Check if element is hidden by overflow:hidden JQuery/JavaScript

Question

I have a calendar that has list of events per day. Currently I show a maximum of 3 events per day and allow the user to toggle to expand the list.

I hide the list with overflow:hidden and max-height:XXpx property. I am trying to detect the events that are currently hidden within that list.

I've looked around and cant find anything that detects this specifically

I have tried:

if (element.offsetHeight < element.scrollHeight || element.offsetWidth < element.scrollWidth) {
     // element has overflow value
 } else {
     // element doesn't have overflow value
 }

and both element.offsetHeight & element.scrollHeight return the same value for any of the elements in my list.

possible duplicate of [Check with jquery if div has overflowing elements](http://stackoverflow.com/questions/7668636/check-with-jquery-if-div-has-overflowing-elements) — Dylan Corriveau, Jun 12 '15 at 13:57
try to write a selector with css relative position top which is higher than the innerHeight of container — Dickens A S, Jun 12 '15 at 13:57
@DylanCorriveau I check all other solutions out there and none of them work with this case, the only one I can't seem to get working to test it out is the `if (element.offsetHeight < element.scrollHeight || element.offsetWidth < element.scrollWidth) { // element has overflow value } else { // element doesn't have overflow value }` — Philippe Fisher, Jun 12 '15 at 14:13

score 2 · Answer 1 · answered Sep 26 '17 at 15:55

scrollHeight and scrollWidth are DOM properties, not jQuery.

$('div').each(function() {
     // get scroll measurements from DOM element
     var contentHeight = this.scrollHeight;
     var contentWidth = this.scrollWidth;
     // get the visible measurements from jQuery object
     var $this = $(this);
     var visibleHeight = $this.height();
     var visibleWidth = $this.width();

     if (visibleHeight < contentHeight
         || visibleWidth < contentWidth ) {
         // element has overflow value
     } else {
         // element doesn't have overflow value
     }
 })

doesnt work... does this assumes you can scroll inside the parent div? — Sagive, Jun 03 '18 at 13:24

Majid Sadr · Answer 2 · 2015-06-13T10:40:02.030

-1

you should check offsetHeight and scrollHeight or offsetWidth and scrollWidth for that:

 $("ul li").each(function(){
     var element = $(this);
     if (element.height() < element.scrollHeight || element.width() < element.scrollWidth) {
         // element has overflow value
     } else {
         // element doesn't have overflow value
     }
 });

edited Jun 13 '15 at 10:40

answered Jun 12 '15 at 14:00

Majid Sadr

911
7
18

element.offsetHeight or any of those returns undefined on my
element

Philippe Fisher

Jun 12 '15 at 14:10

1

This solution doesn't work, since both `element.offsetHeight` & `element.scrollHeight` return the same value – Philippe Fisher Jun 12 '15 at 16:57

Check if element is hidden by overflow:hidden JQuery/JavaScript

2 Answers2