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.
4 réponses
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.
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é!
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.
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"
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.