logo标签列表

当检测到div垂直溢出时，是否有一种方法可以触发事件？

javascripthtmlcsspagination
6
我的页面的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分页样式的IT技术，内容会动态插入到每个页面div中。如果页面div中的内容溢出，我希望将溢出的内容放入下一个页面div（如果下一个页面不存在，则创建一个新的页面）。因此，我想知道是否有一种方法可以让页面div在其内容溢出时触发事件，这样我就可以通过反向循环遍历内容元素来决定哪些元素应该放入下一个页面div。

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

Matt提出的溢出事件仅在Firefox、Safari和Chrome中受支持。似乎没有一种通用的跨浏览器方式来处理这种类型的事件。 - merlin
如果我不使用事件的方式，每次添加新元素时都需要检查页面是否发生了溢出，以及其旁边的下一页和下下一页......是否可以创建自定义事件？（英语不是我的母语，所以语法可能看起来有点奇怪） - merlin
为了使其有用，溢出事件必须异步发生，例如在设置元素的innerHTML属性之后。这意味着您必须使用Promises或回调函数。我想找出一个HTML字符串是否会导致div溢出，但唯一的方法是尝试并测量高度。但是尝试它意味着需要异步编码，这在循环内部很困难。（如果事件不是普遍可用的，则两个嵌套的异步调用requestAnimationFrame将完成工作。） - David Spector
5个回答
3
您可以获取嵌套在溢出DIV内的子DIV的clientHeight。换句话说...
<div style="overflow:auto">
   <div id="actualContent" style="overflow:visible">
your content here
   </div>

</div>

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

2

可以。使用"overflow"事件。

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

您可能需要取消 overflow:hidden 并将其设置为 overflow:auto（例如）才能触发它，但是一旦触发，您可以将 overflow 设置回 hidden 并执行其余的内容拆分例程。

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

1
这个事件正是我想要的，但是IE不支持它。 - merlin
3
仅适用于Firefox。 - Supreme Dolphin
1
正如@SupremeDolphin所述，这是非标准的，并且仅在Firefox中有效。请参见（https://developer.mozilla.org/en-US/docs/Web/API/Element/overflow_event） - Kola
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>
    const overflowDetector=x=>x.style.overflow;
    var overflow = overflowDetector(document.querySelector("#overflowTest"));
    (overflow === "scroll")?alert("overflow : scroll"):alert("overflow : "+overflow);
    </script>

</body>
</html>

这个答案和其他答案一样，没有考虑到当内容改变时会发生溢出，因此在溢出被检测到之前会有一个异步延迟，因为渲染不是同步进行的。 - David Spector
1
我会使用一个额外的div，将其定位在屏幕外，并且与您的页面div具有完全相同的内容（您应该保持此内容更新）。唯一的区别是额外的div没有“overflow:hidden”。
现在，检查这两个div之间是否存在高度差异，如果有，则存在溢出的内容！
谢谢你的帮助。但我认为保留每个页面 div 的完全副本有点效率不友好。 - merlin
你不必一直保留它。只需在需要时填写并在此之后丢弃即可。您仅在需要检查大小时才需要该div... 如果您不介意可能会出现轻微的闪烁，甚至可以在原始div上仅删除“overflow：hidden;”一小段时间，检查大小，然后立即将其改回来。 - Willem Mulder
1

让我们明确以下定义。

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

内容 - 溢出的内容。

要检测溢出，请检查视图.offsetHeight和内容.offsetHeight之间的差异，您的溢出内容就是这个减去的值。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接