title: HTML/Javascript: Make div display block when in view?
body: <p>I'm writing an online book reader. The average book has 270 distinct pages. I'd like the user to be able to browse through the pages but if all are loaded immediately then the page freezes as it's too much content. To fix this I think the best solution is that each page's content is <code>display:none</code> to begin with and only becomes <code>display:block</code> when in view.</p>
  
  <p>Unfortunately I'm not very experienced with Javascript and so I'm having difficulty figuring out how to do this.</p>
  
  <p>I'm using only raw Javascript (no JQuery). So far I have this:</p>
  
  <p><a href="https://jsfiddle.net/ya2n8bfm/" rel="nofollow">https://jsfiddle.net/ya2n8bfm/</a></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;.bookzone { margin:0; padding:0; overflow:scroll; }&lt;/style&gt;
  &lt;script&gt;
      function scollPos() {
          var sp = document.getElementById("bookzone").scrollTop;
          if (sp &gt; 100) {
              document.getElementById("p2").style.display = "block";
          }
      }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="bookzone" onscroll="scollPos();"&gt;
      &lt;div style="width:400;height:400;"&gt;&lt;div id="p1" style="display:none;"&gt;Page 1&lt;/div&gt;&lt;/div&gt;
      &lt;div style="width:400;height:400;"&gt;&lt;div id="p2" style="display:none;"&gt;Page 2&lt;/div&gt;&lt;/div&gt;
      &lt;div style="width:400;height:400;"&gt;&lt;div id="p3" style="display:none;"&gt;Page 3&lt;/div&gt;&lt;/div&gt;
      &lt;div style="width:400;height:400;"&gt;&lt;div id="p4" style="display:none;"&gt;Page 4&lt;/div&gt;&lt;/div&gt;
      &lt;div style="width:400;height:400;"&gt;&lt;div id="p5" style="display:none;"&gt;Page 5&lt;/div&gt;&lt;/div&gt;
      &lt;div style="width:400;height:400;"&gt;&lt;div id="p6" style="display:none;"&gt;Page 6&lt;/div&gt;&lt;/div&gt;
      &lt;div style="width:400;height:400;"&gt;&lt;div id="p7" style="display:none;"&gt;Page 7&lt;/div&gt;&lt;/div&gt;
      &lt;div style="width:400;height:400;"&gt;&lt;div id="p8" style="display:none;"&gt;Page 8&lt;/div&gt;&lt;/div&gt;
      &lt;div style="width:400;height:400;"&gt;&lt;div id="p9" style="display:none;"&gt;Page 9&lt;/div&gt;&lt;/div&gt;
      &lt;div style="width:400;height:400;"&gt;&lt;div id="p10" style="display:none;"&gt;Page 10&lt;/div&gt;&lt;/div&gt;
      &lt;div style="width:400;height:400;"&gt;&lt;div id="p11" style="display:none;"&gt;Page 11&lt;/div&gt;&lt;/div&gt;
      &lt;div style="width:400;height:400;"&gt;&lt;div id="p12" style="display:none;"&gt;Page 12&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>That doesn't actually seem to work at all. I'd like that each page becomes <code>display:block</code> when it's in the viewport (any part of it) and becomes <code>display:none</code> when it's entirely outside of the viewport.</p>
  
  <p>So my two issues are: (1) what I've done so far doesn't seem to work at all, (2) I'm not sure how to make it know when an element is in the viewport. I could do (2) based on a whole series of rules since every page is the same height, but perhaps there is a more efficient way?</p>