title: Get the current view in scrollable div
body: <p>I'm making a picture gallery with many pictures. I want to use lazy loading and only load the images that are visible in the screen. The gallery is inside a div becuase this whole gallery is a part of a bigger project. </p>
  
  <p><strong>What I want</strong>: Get the current scroll location of the div so I can check if the images are in view in the div.</p>
  
  <p><strong>What I have</strong>: I have it working on the full window scroll bar, I just need to get it changed to the div.</p>
  
  <pre><code>        var pItem = document.getElementsByClassName('progressive replace'), timer;
  
  function inView() {
          var wT = window.pageYOffset, wB = wT + window.innerHeight, cRect, pT, pB, p = 0;
          while (p &lt; pItem.length) {
  
              cRect = pItem[p].getBoundingClientRect();
              pT = wT + cRect.top;
              pB = pT + cRect.height;
  
              if (wT &lt; pB &amp;&amp; wB &gt; pT) {
                  loadFullImage(pItem[p]);
                  pItem[p].classList.remove('replace');
              }
              else p++;
          }
      }
  </code></pre>
  
  <p>I need something like this: </p>
  
  <pre><code>function inView() {
          var wT = $('.image_view').pageYOffset, wB = wT + $('.image_view').innerHeight, cRect, pT, pB, p = 0;
          while (p &lt; pItem.length) {
  
              cRect = pItem[p].getBoundingClientRect();
              pT = wT + cRect.top;
              pB = pT + cRect.height;
  
              if (wT &lt; pB &amp;&amp; wB &gt; pT) {
                  loadFullImage(pItem[p]);
                  pItem[p].classList.remove('replace');
              }
              else p++;
          }
      }
  </code></pre>
  
  <p>The class <code>image_view</code> is the scrollable div with the images inside it.</p>