javascript - finns det ett sätt att utlösa en händelse när vertikal överflöd upptäcks i en div?

HTML-koden på min sida ser ut så här:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>demo</title>
    <style type="text/css">
        div.page {
            position: relative;
            background-color: #F2F2F2;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
            width: 794px;
            height: 1123px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 30px;
            margin-bottom: 30px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="form">
    <div id="page-1" class="page"></div>
    <div id="page-2" class="page"></div>
</div>
</body>
</html>

det simulerar en pagineringsstil som Word, innehållet infogas dynamiskt i varje sid-div. Om innehållet i sid-diven överskrider gränsen vill jag lägga det överskjutande innehållet i nästa sid-div (eller skapa en ny om nästa sida inte finns). Så jag undrar om det finns ett sätt att låta sid-diven utlösa en händelse när dess innehåll överskrids, så att jag kan loopa baklänges genom innehållselementen för att bestämma vilka element som ska läggas i nästa sid-div.

Alla knuffar i rätt riktning kommer vara en enorm hjälp! Tack.

Svar #1

Du kan få clientHeight på en inbäddad DIV som är barnet till din overflow DIV. Med andra ord...

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

</div>

Mät clientHeight på den inre div:en och jämför den med clientHeight på den yttre div:en.

Svar #2

Ja. Använd "overflow"-händelsen.

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

Du kanske måste ta bort overflow:hidden och ställa in det på overflow:auto (till exempel) för att det ska aktiveras, men när det väl gör det kan du återställa overflow till hidden och fortsätta med resten av din innehållsdelningsrutin.

Jag tror att det i Chrome och Safari finns ett liknande evenemang: "overflowchanged"