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.

Answer 1

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