Question

我的网页的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。

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

Answer 1

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

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

Answer 2

让我们明确以下定义。

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

content - 溢出的内容。

要检测溢出检查视图。offsetHeight与内容offsetHeight之间的差异，您的溢出内容就是此减去的值。

Answer 3

您可以获取嵌套DIV的clientHeight，它是溢出DIV的子级。换句话说......

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

</div>

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

Answer 4

是。使用“溢出”事件。

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

您可能必须取消溢出：隐藏并将其设置为overlflow：auto（例如）以便触发它但是一旦它发生，您可以将溢出设置回隐藏并执行其余的内容拆分例程。

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

Answer 5

我有这个问题的解决方案。但它仅适用于内联 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>

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

5 个答案: