当在 div 中检测到垂直溢出时,有没有办法触发事件?

mer*_*lin 6 html javascript css pagination

我的页面的 html 看起来像这样:

<!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>
Run Code Online (Sandbox Code Playgroud)

它模拟了类似Word的分页样式,内容动态插入到每个页面div中。如果页面div中的内容溢出,我想将溢出的内容放入下一页div中(或者如果下一页不存在则创建一个新的)。所以我想知道是否有一种方法可以让页面 div 在内容溢出时触发事件,这样我就可以反向循环内容元素来决定哪些元素应该放入下一个页面 div 中。

任何朝着正确方向的推动都会带来巨大的帮助!谢谢。

Gen*_* S. 3

您可以获得作为溢出 DIV 子级的嵌套 DIV 的 clientHeight。换句话说...

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

</div>
Run Code Online (Sandbox Code Playgroud)

测量内部 div 的 clientHeight 并将其与外部 div 的 clientHeight 进行比较。