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

我的网页的HTML看起来像这样：有没有办法在div中检测到垂直溢出时触发事件？

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

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

来源

2011-11-11 merlin

马特建议的溢出事件只是Firefox Safari和Chrome支持。似乎这种事件没有通用的交叉浏览器方式。 – merlin

如果我不去事件的方式，我需要检查，如果每次我添加一个新的元素，页面旁边，旁边的页面溢出发生在页面上.......有可能创建一个自定义事件？（英语不是我的本地人，所以语法可能看起来有点奇怪） – merlin

你可以得到一个嵌套DIV的clientHeight，它是你的溢出DIV的孩子。换句话说...

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

</div>

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

来源

2011-11-11 09:54:42

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

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

来源

2011-11-11 09:48:24

感谢您的帮助。但我认为保持每个页面div的精确副本是有点不友好的。 – merlin

你不必保留它。只需在需要时填写，然后丢弃它。当你需要检查尺寸时，你只需要div;如果你不介意可能的小闪烁，你甚至可以在短时间内删除“overflow：hidden”。在原始div上，检查大小，然后立即将其更改回来。 –

让我们来清楚下面的定义。

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

内容框 - 所飞越的内容。

检测溢出检查视图之间的差异。 offsetHeight和内容。 offsetHeight和你的飞扬内容是这个减去的价值。

来源

2011-11-11 09:52:09

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

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

您可能必须脱掉溢出：隐藏，并设置为overlflow：自动（例如）为它火，但一旦它，你可以设置溢流回藏，做你的内容的分裂其余常规。

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

来源

2011-11-13 12:59:06 Matthew

这个事件正是我想要的，但IE不支持它。 – merlin

仅适用于Firefox。 –

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

回答

相关问题