Le html de ma page ressemble à ceci:

<!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>

Il simule un style de pagination comme Word, le contenu est inséré dynamiquement dans chaque div de page. si le contenu de la page div est débordé, je veux mettre le contenu débordé dans la page div suivante (ou en créer un nouveau si la page suivante n'existe pas). Je me demande donc s'il existe un moyen de laisser la div de page déclencher un événement lorsque son contenu est débordé, donc je peux inverser la boucle à travers les éléments de contenu pour décider quels éléments devraient être placés dans la div de page suivante.

Toute poussée dans la bonne direction sera d'une aide précieuse! Je vous remercie.

2
merlin 11 nov. 2011 à 13:44

4 réponses

Meilleure réponse

Vous pouvez obtenir le clientHeight d'un DIV imbriqué qui est l'enfant de votre DIV de débordement. En d'autres termes...

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

</div>

Mesurez le clientHeight du div intérieur et comparez-le au clientHeight du div externe.

2
Yevgeny Simkin 11 nov. 2011 à 09:54

J'utiliserais un div supplémentaire qui est positionné en dehors de l'écran et a exactement le même contenu que votre div de page (vous devriez le garder à jour). La seule différence est que le div supplémentaire n'a pas de "débordement: caché".

Maintenant, vérifiez s'il y a une différence de hauteur entre les deux divs, et si c'est le cas, il y a du contenu survolé!

1
Willem Mulder 11 nov. 2011 à 09:48

Soyons clairs avec les définitions suivantes.

Afficher - Zone visible ou la boîte contenant le contenu

Content - Le contenu survolé.

Pour détecter un débordement, vérifiez la différence entre la vue. offsetHeight et le contenu. offsetHeight et votre contenu débordé est cette valeur soustraite.

1
Ashwin Krishnamurthy 11 nov. 2011 à 09:52

Oui. Utilisez l'événement "overflow".

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

Vous devrez peut-être supprimer overflow: hidden et le définir sur Overflow: auto (par exemple) pour qu'il se déclenche, mais une fois qu'il le fera, vous pouvez redéfinir le débordement sur caché et faire le reste de votre routine de fractionnement de contenu.

Je crois que dans Chrome et Safari, il y a un événement similaire: "overflowchanged"

0
Matthew 13 nov. 2011 à 14:56