the html of my page looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
".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.
the html of my page looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3/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.
Share Improve this question asked Nov 11, 2011 at 9:44 merlinmerlin 341 gold badge15 silver badges23 bronze badges 3- The overflow event suggested by Matt is only supported in firefox safari and chrome. Seems there isn't a universal crossbrowser way for this kind of event. – merlin Commented Nov 14, 2011 at 2:44
- If i don't go the event way, i need to check if overflow happened on the page every time i add a new element and the page next to that and next next to that.......is it possible to create a custom event?(English is not my native, so the grammar may looks a little bit weird) – merlin Commented Nov 14, 2011 at 2:55
- For it to be useful, an overflow event must happen asynchronously, for example after setting an element's innerHTML property. Which means you have to use Promises or callbacks. I wanted to find out if a string of HTML would cause a div to overflow, but the only way to find out is to try it and measure the height. But trying it means needing asynchronous coding, which is difficult inside loops. (Two nested asynchronous calls to requestAnimationFrame will do the job, if an event is not universally available.) – David Spector Commented Dec 16, 2022 at 1:01
5 Answers
Reset to default 3You 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 pare it to the clientHeight of the outer div.
Yes. Use the "overflow" event.
window.addEventListener ("overflow", yourFunction, false);
You might have to take off overflow:hidden and set it to overlflow:auto (for example) for it to fire but once it does you can set overflow back to hidden and do the rest of your content splitting routine.
I believe in Chrome and Safari there is a similar event: "overflowchanged"
I would use an extra div that is positioned outside the screen and has the exact same content as your page div (you should keep this updated). The only difference is that the extra div has no "overflow:hidden".
Now, check whether there is a difference in height between the two divs, and if so, there is overflown content!
Let us be clear with the following definitions.
View - Viewable area or the box containing the content
content - The overflown content.
To detect overflow check for the difference between the view.offsetHeight and the content.offsetHeight and your overflown content is this subtracted value.
I have a solution of this question. But it works only in inline 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>