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 — Dylan Corriveau
– Dylan Corriveau, Commented Jun 12, 2015 at 13:57
try to write a selector with css relative position top which is higher than the innerHeight of container — Dickens A S
– Dickens A S, Commented Jun 12, 2015 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
– Philippe Fisher, Commented Jun 12, 2015 at 14:13

Brad · Accepted Answer · 2017-09-26 15:55:09Z

2

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
     }
 })

answered Sep 26, 2017 at 15:55

Brad

15.7k6 gold badges40 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sagive Over a year ago

doesnt work... does this assumes you can scroll inside the parent div?

Majid Sadr · Accepted Answer · 2015-06-13 10:40:02Z

-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, 2015 at 10:40

answered Jun 12, 2015 at 14:00

Majid Sadr

1,10110 silver badges19 bronze badges

2 Comments

Philippe Fisher Over a year ago

element.offsetHeight or any of those returns undefined on my <li> element

Philippe Fisher Over a year ago

This solution doesn't work, since both element.offsetHeight & element.scrollHeight return the same value

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related