is there a way to fire a event when vertical overflow is detected in a div?

Question

the html of my page looks like this:

Answer 1

I would use an extra div that is positioned outside the screen and has the exact same content as your page div (you should keep this updated). The only difference is that the extra div has no "overflow:hidden".

Now, check whether there is a difference in height between the two divs, and if so, there is overflown content!

Answer 2

Yes. Use the "overflow" event.

window.addEventListener ("overflow", yourFunction, false);

You might have to take off overflow:hidden and set it to overlflow:auto (for example) for it to fire but once it does you can set overflow back to hidden and do the rest of your content splitting routine.

I believe in Chrome and Safari there is a similar event: "overflowchanged"

Answer 3

You can get the clientHeight of a nested DIV that is the child to your overflow DIV. In other words...

<div style="overflow:auto">
   <div id="actualContent" style="overflow:visible">
your content here
   </div>

</div>

Measure the clientHeight of the inner div and compare it to the clientHeight of the outer div.

Answer 4

Let us be clear with the following definitions.

View - Viewable area or the box containing the content

content - The overflown content.

To detect overflow check for the difference between the view.offsetHeight and the content.offsetHeight and your overflown content is this subtracted value.