6

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.

merlin
  • 784
  • 1
  • 15
  • 22
  • 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 Nov 14 '11 at 02: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 Nov 14 '11 at 02: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 Dec 16 '22 at 01:01

5 Answers5

3

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.

Yevgeny Simkin
  • 27,946
  • 39
  • 137
  • 236
2

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"

Matthew
  • 8,183
  • 10
  • 37
  • 65
1

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>
Rafid Al Mahmud Personal
  • 37
  • 3
  • This answer, like the others, doesn't take into account that overflow happens when content is changed, so there is an asynchronous delay before the overflow can be detected because rendering does not happen synchronously. – David Spector Dec 16 '22 at 01:05
1

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!

Willem Mulder
  • 12,974
  • 3
  • 37
  • 62
  • Thanks for the help.But i think keep a exact copy of each page div is a little bit efficiency unfriendly. – merlin Nov 12 '11 at 01:48
  • You don't have to keep it. Just fill it when you need it and discard it after that. You only need the div when you need to check sizes... If you don't mind a possible little flicker, you could even just for a tiny moment remove the "overflow:hidden;" on the original div, check sizes and then immediately change it back again. – Willem Mulder Nov 12 '11 at 12:19
1

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.

Ashwin Krishnamurthy
  • 3,750
  • 3
  • 27
  • 49