css 当在div中检测到垂直溢出时，是否有办法触发事件？

gcxthw6b 于 2023-03-05 发布在其他

关注(0)|答案(5)|浏览(92)

我的网页的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的分页风格，内容动态插入到每个page div中，如果page div中的内容溢出，我想把溢出的内容放到下一个page div中（或者如果下一个页面不存在的话创建一个新的）所以我想知道是否有一种方法可以让page div在内容溢出时触发一个事件，所以我可以反向循环内容元素来决定哪些元素应该放到下一页div中。
任何向正确方向的推动都将是巨大的帮助！谢谢。

css

来源：https://stackoverflow.com/questions/8092137/is-there-a-way-to-fire-a-event-when-vertical-overflow-is-detected-in-a-div

5条答案

按热度按时间

tnkciper1#

您可以获取嵌套DIV的clientHeight，该嵌套DIV是溢出DIV的子级。

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

</div>

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

赞(0）回复(0）举报 2023-03-05

lrpiutwd2#

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

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

你可能需要关闭overflow：hidden并将其设置为overlflow：auto（例如）才能触发它，但是一旦触发了它，你就可以将overflow设置回hidden并执行剩下的内容分割例程。
我相信在Chrome和Safari中也有类似的事件：“溢出已更改”

赞(0）回复(0）举报 2023-03-05

d5vmydt93#

我会使用一个额外的div，它位于屏幕之外，与页面div的内容完全相同（你应该保持更新）。唯一的区别是额外的div没有“overflow：hidden”。
现在，检查两个div之间是否存在高度差异，如果存在，则存在溢出的内容！

赞(0）回复(0）举报 2023-03-05

neskvpey4#

让我们弄清楚下面的定义。
视图-可查看区域或包含内容的框
content -溢出的内容。
要检测溢出，请检查view.offsetHeight和content.offsetHeight之间的差异，溢出的内容就是这个减法值。

赞(0）回复(0）举报 2023-03-05

soat7uwm5#

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

赞(0）回复(0）举报 2023-03-05

我来回答

css 当在div中检测到垂直溢出时，是否有办法触发事件？

5条答案

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

相关问题

热门标签

最新问答