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

【问题标题】：is there a way to fire a event when vertical overflow is detected in a div?当在 div 中检测到垂直溢出时，有没有办法触发事件？
【发布时间】：2011-12-26 21:18:27
【问题描述】：

我的页面的 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>

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

任何朝着正确方向的推动都将是巨大的帮助！谢谢你。

【问题讨论】：

Matt 建议的溢出事件仅在 firefox safari 和 chrome 中支持。似乎没有针对此类事件的通用跨浏览器方式。
如果我不走事件的方式，我需要检查每次添加新元素时页面上是否发生溢出以及该页面旁边和旁边的页面.... ...是否可以创建自定义事件？（英语不是我的母语，所以语法可能看起来有点奇怪）

标签： javascript html css pagination

【解决方案1】：

我有这个问题的解决方案。但它只适用于内联 CSS。

<!DOCTYPE html
<html>
<head>
<style>
#overflowTest {
  background: #4CAF50;
  color: white;
  padding: 15px;
  width: 50%;
  height: 100px;
  border: 1px solid #ccc;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<p>The overflow property controls what happens to content that is too big to fit into an area.</p>

<div id="overflowTest" style="overflow: scroll">This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<script>
function overflowDetector(x){return x.style.overflow;}

var overflow = overflowDetector(document.querySelector("#overflowTest"));

if(overflow === "scroll"){
    alert("overflow : scroll");
}
else{
    alert("overflow : "+overflow);
}
</script>

</body>
</html>

【讨论】：

【解决方案2】：

是的。使用“溢出”事件。

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

您可能必须取消 overflow:hidden 并将其设置为 overlflow:auto（例如）以使其触发，但一旦完成，您可以将溢出设置回隐藏并执行其余的内容拆分例程。

我相信Chrome和Safari也有类似的事件：“overflowchanged”

【讨论】：

这个事件正是我想要的，但是IE不支持。
仅适用于 Firefox。
正如@SupremeDolphin 所说，这是非标准的，仅适用于 Firefox。见 (developer.mozilla.org/en-US/docs/Web/API/Element/overflow_event)

【解决方案3】：

您可以获取作为溢出 DIV 的子级的嵌套 DIV 的 clientHeight。也就是说……

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

</div>

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

【讨论】：

【解决方案4】：

让我们清楚以下定义。

视图 - 可视区域或包含内容的框

content - 溢出的内容。

检测溢出检查 view.offsetHeight 和 content.offsetHeight 之间的差异，溢出的内容就是这个减去的值。

【讨论】：

【解决方案5】：

我会使用一个额外的 div，它位于屏幕之外，并且与您的页面 div 具有完全相同的内容（您应该保持更新）。唯一的区别是额外的 div 没有“溢出：隐藏”。

现在，检查两个div之间的高度是否有差异，如果有，则内容溢出！

【讨论】：

感谢您的帮助。但我认为保留每个页面 div 的精确副本有点效率不友好。
您不必保留它。只需在需要时填充它，然后将其丢弃。当您需要检查尺寸时，您只需要 div ...在原始 div 上，检查大小，然后立即将其更改回来。