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

问题描述：

我的网页的html看起来像这样：

the html of my page looks like this:

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

它模拟分页样式如Word，内容动态插入每个页面div。如果页面div中的内容溢出，我想把溢出的内容放到下一页div（或如果下一页不存在，创建一个新的）。所以我想知道是否有一种方法让页面的div触发一个事件，当它的内容溢出，所以我可以反转循环通过内容元素来决定哪些元素应放入下一页div。

it simulates a pagination style like Word, the content is dynamicly inserted into each page div. if the content in the page div is overflowed, i want to put the overflowed content into the next page div(or create a new one if the next page doesn't exists). So i wonder if there is a way to let the page div trigger a event when it's content is overflowed,so i can reverse loop through the content elements to decide which elements should put into the next page div.

任何推进正确的方向将是一个巨大的帮助！谢谢。

Any push in the right direction will be a tremendous help! Thank you.

答

您可以获得一个嵌套DIV的clientHeight，它是溢出DIV的子对象。换句话说...

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>

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

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

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

相关推荐