在 div 中检测到垂直溢出时，有没有办法触发事件? [英] is there a way to fire a event when vertical overflow is detected in a div?

查看：24 发布时间：2022/1/4 13:31:49 javascript html css pagination

本文介绍了在 div 中检测到垂直溢出时，有没有办法触发事件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的页面的 html 如下所示:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"http://www.w3.org/TR/html4/loose.dtd"><头><title>演示</title><style type="text/css">div.page {位置:相对；背景色:#F2F2F2；box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);宽度:794px；高度:1123px；左边距:自动；右边距:自动；边距顶部:30px；底边距:30px；溢出:隐藏；}</风格><身体><div id="表单"><div id="page-1" class="page"></div><div id="page-2" class="page"></div>

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

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

解决方案

您可以获取作为溢出 DIV 子代的嵌套 DIV 的 clientHeight.换句话说...


<div id="actualContent" style="overflow:visible">你的内容在这里

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

the html of my page looks like this:

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

it simulates a pagination style like Word, the content is dynamicly inserted into each page div. if the content in the page div is overflowed, i want to put the overflowed content into the next page div(or create a new one if the next page doesn't exists). So i wonder if there is a way to let the page div trigger a event when it's content is overflowed,so i can reverse loop through the content elements to decide which elements should put into the next page div.

Any push in the right direction will be a tremendous help! Thank you.

解决方案

You can get the clientHeight of a nested DIV that is the child to your overflow DIV. In other words...

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

</div>

Measure the clientHeight of the inner div and compare it to the clientHeight of the outer div.

这篇关于在 div 中检测到垂直溢出时，有没有办法触发事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

在 div 中检测到垂直溢出时，有没有办法触发事件? [英] is there a way to fire a event when vertical overflow is detected in a div?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

在 div 中检测到垂直溢出时，有没有办法触发事件? [英] is there a way to fire a event when vertical overflow is detected in a div?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭