Check if element is hidden during overflow: hidden jquery / javascript

Question

I have a calendar with a list of events per day. I currently display a maximum of 3 events per day and allow the user to switch to expand the list.

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

I looked around and could not find anything that would specifically reveal it

I tried:

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

and both element.offsetHeightand element.scrollHeightreturn the same value for any of the items on my list.

Answer 1

you should check offsetHeightand scrollHeightor offsetWidthand scrollWidththis:

 $("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
     }
 });

Answer 2

scrollHeight scrollWidth DOM, 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
     }
 })