title: JQuery scroll event freezes page
body: <p>I setup a trigger which checks if an element is in the viewport (visible on the screen) and added it to the scroll event. This works fine on some pages, but large pages it freezes the page. On firefox I can't scroll at all, it crashes the page completely and an alert comes up telling me that jquery is not responding. Heres the trigger:</p>
  
  <pre><code> $(window).on("scroll", function () {
       $('div').each(function () {
           if ($(this).isOnScreen(true)) {
               $(this).trigger('report.appear');
           }
       });
   });
  </code></pre>
  
  <p>and heres the isOnScreen function (which finds out what elements are in the viewport):</p>
  
  <pre><code>$.fn.isOnScreen = function () {
       var win = $(window);
       var viewport = {
           top: win.scrollTop(),
           left: win.scrollLeft()
       };
       viewport.right = viewport.left + win.width();
       viewport.bottom = viewport.top + win.height();
  
       var bounds = this.offset();
       bounds.right = bounds.left + this.outerWidth();
       bounds.bottom = bounds.top + this.outerHeight();
  
       return (!(viewport.right &lt; bounds.left || viewport.left &gt; bounds.right || viewport.bottom &lt; bounds.top || viewport.top &gt; bounds.bottom));
   };
  </code></pre>
  
  <p>It doesn't matter how many div elements are on the page, it seems to be just large amounts of any content that crashes it, or at least large HTML tables that I have. Is there another way to detect when an element appears  on the screen without using the scroll event? Or is there a way to use scroll without crashing jquery? </p>
  
  <p>UPDATE: </p>
  
  <p>When I comment out this:</p>
  
  <pre><code> $(window).on("scroll", function () {
       $('div').each(function () {
           /*
          if ($(this).isOnScreen(true)) {
              $(this).trigger('report.appear');
          }
          */
       });
   });
  </code></pre>
  
  <p>it works fine, so its the isOnScreen function thats causing the problem. Is there a better way to do this which won't overload the browser like this?</p>