[英]is there a way to fire a event when vertical overflow is detected in a div?
我的頁面的 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 在內容溢出時觸發事件，這樣我就可以反向循環內容元素來決定哪些元素應該放入下一個頁面 div。
任何朝正確方向的推動都將是巨大的幫助！ 謝謝你。
您可以獲得嵌套 DIV 的 clientHeight，該 DIV 是溢出 DIV 的子級。 換句話說...
<div style="overflow:auto">
<div id="actualContent" style="overflow:visible">
your content here
</div>
</div>
測量內部 div 的 clientHeight 並將其與外部 div 的 clientHeight 進行比較。
我會使用一個額外的 div，該 div 位於屏幕外並且與您的頁面 div 具有完全相同的內容（您應該保持更新）。 唯一的區別是額外的 div 沒有“溢出：隱藏”。
現在，檢查兩個div的高度是否有差異，如果有，就是內容溢出了！
讓我們清楚地了解以下定義。
查看 - 可視區域或包含內容的框
content - 溢出的內容。
檢測溢出檢查視圖之間的差異。 offsetHeight和內容。 offsetHeight和您溢出的內容是這個減去值。
我有這個問題的解決方案。 但它僅適用於內聯 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>
是的。 使用“溢出”事件。
window.addEventListener ("overflow", yourFunction, false);
您可能必須取消 overflow:hidden 並將其設置為overlflow:auto（例如）才能觸發，但是一旦觸發，您可以將溢出設置回隱藏並執行其余的內容拆分例程。
我相信在 Chrome 和 Safari 中也有類似的事件：“overflowchanged”
有沒有一種方法可以使IE 10+在元素的溢出發生變化時觸發事件？
[英]Is there a way to get IE 10+ to fire an event when the overflow of an element changes?
當插入符在 contenteditable div 中輸入 span 元素時觸發事件
[英]Fire event when caret enters span element in contenteditable div
當div由Winforms中的webBrowser1中的javascript更改div時觸發事件
[英]Fire an event when a div changes by a javascript in a webBrowser1 in a winforms
檢測到pointermove后，鏈接上的鼠標操作不會觸發pointerup事件
[英]pointerup event does not fire for mouse actions on a link when pointermove has been detected
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.