Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>If you can possibly help it, <strong>DO NOT USE .scrollHeight</strong>.</p> <p>.scrollHeight does not yield the same kind of results in different browsers in certain circumstances (most prominently while scrolling).</p> <p>For example:</p> <pre><code>&lt;div id='outer' style='width:100px; height:350px; overflow-y:hidden;'&gt; &lt;div style='width:100px; height:150px;'&gt;&lt;/div&gt; &lt;div style='width:100px; height:150px;'&gt;&lt;/div&gt; &lt;div style='width:100px; height:150px;'&gt;&lt;/div&gt; &lt;div style='width:100px; height:150px;'&gt;&lt;/div&gt; &lt;div style='width:100px; height:150px;'&gt;&lt;/div&gt; &lt;div style='width:100px; height:150px;'&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>If you do </p> <blockquote> <p>console.log($('#outer').scrollHeight);</p> </blockquote> <p>you'll get 900px in Chrome, FireFox and Opera. That's great.</p> <p><strong>But</strong>, if you attach a wheelevent / wheel event to #outer, when you scroll it, Chrome will give you a constant value of 900px (correct) but FireFox and Opera will change their values as you scroll down (incorrect).</p> <p>A very simple way to do this is like so (a bit of a cheat, really). (This example works while dynamically adding content to #outer as well):</p> <pre><code>$('#outer').css("height", "auto"); var outerContentsHeight = $('#outer').height(); $('#outer').css("height", "350px"); console.log(outerContentsHeight); //Should get 900px in these 3 browsers </code></pre> <p>The reason I pick these three browsers is because all three can disagree on the value of .scrollHeight in certain circumstances. I ran into this issue making my own scrollpanes. Hope this helps someone.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload