Call (Trigger) a JS function on Y overflow of div element
<p><strong>So,</strong> I have a <code>&lt;div&gt;</code> element, which has word wrap, but <code>overflow-y</code> has been set to <code>hidden</code> (which is what I need).</p>

<p>But let's say that the <code>&lt;div&gt;</code> is so full of text, that it overflows and in result - the rest of the text is hidden (<em>which is fine</em>).</p>

<p>But I want to achieve the following effect: when and <strong>only</strong> when the box is overflowing in <strong>y</strong> direction, I want it to display some text, saying: "<strong>Click to display the rest</strong>". I know how to make the "<strong>Click to display the rest</strong>" part, but what I don't know is how to display the text <strong>only</strong> when the box is overflowing in <strong>y</strong> direction.</p>

<p><strong><em>Quick sidenote:</em></strong> I read <a href="https://stackoverflow.com/questions/2446598/calling-javascript-from-function-from-css">Calling JavaScript from function from CSS</a>. I had the idea that on <strong>overflow-y</strong> it would call a function, but that proved to be impossible. So I am looking for another solution.</p>

<p>My <code>&lt;div&gt;</code> element:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="background-color:rgb(220,220,220);height:30%;width:1024px;overflow-y:hidden;word-wrap:break-word;"&gt;</code></pre>
</div>
</div>
</p>

<p><strong>So, the overview of the problem:</strong> I need to display "Click here do see the rest" when the div is overflowing in y direction.</p>

<p><strong><em>Thank you in advance</em></strong></p>