Why do I sometimes lose the scroll-event in my big table? Especially in Chrome
<p>I'm developing a table component for big data, with automatic pagination in JavaScript. The component only create rows for the pages which are visible at the moment. When a page is not visible anymore, the component removes the rows.</p>

<p>All work's fine, expect the scrolling with the "page up" and "page down"-keys. Sometimes (especially in the Chrome browser) after the removePageContent-method was called, the scroll-event will not fire again. Only a click in the table can fix this temporary.</p>

<p>Here is a simplified example of my code on <a href="https://jsfiddle.net/STARSCrazy/xshs40Lo/16/" rel="nofollow">JSFiddle</a></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
  $.fn.isOnScreen = function () {
    var win = $(".table-container").parent();  
    var vpTop = win.scrollTop();
    var vpLeft = win.scrollLeft();
    var vpRight = vpLeft + win.width();
    var vpBottom = vpTop + win.height();

    var bounds = this.offset();    
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();
    
    return (!(vpRight &lt; bounds.left || vpLeft &gt; bounds.right || vpBottom &lt; bounds.top || vpTop &gt; bounds.bottom));
  };
  
  var createPageContent = function($page) {
      if (!$page.hasClass('hasContent'))
      {             
        var pageId = parseInt($page.attr("pageId"));
        var content = "";
        for(var i = 1; i &lt;= 100; i++) {
          content = content + "&lt;tr&gt;&lt;td&gt;" + (pageId * 100 + i) + "&lt;/td&gt;&lt;td&gt;&lt;div&gt;value 2&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;value 3&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;value 4&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;value 5&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;value 6&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div&gt;value 7&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;";         
        }
        $page.find(".placeholder").replaceWith(content);        
        $page.addClass('hasContent')
      }
  };
  
  var removePageContent = function($page) {
    if ($page.hasClass('hasContent')) {
     console.log("removePageContent");
     $page.removeClass('hasContent')
      $page.find("tr").remove();
      $page.append("&lt;tr class='placeholder'&gt;&lt;/tr&gt;");      
    }
  };  

  $(".table-container").scroll(function() {
   console.log("trigger scroll-event");
    var bodies = $("tbody");
    for (var i = 0; i &lt; bodies.length; i++) {
      var $elem = $(bodies[i])     
      if ($elem.isOnScreen()) {
    createPageContent($elem);
      } else {
       removePageContent($elem);      
      }    
    }  
  });

 //Create 50 pages
 var pagesHtml = "";
 for(var iPage = 0; iPage &lt; 50; iPage++) {
   pagesHtml = pagesHtml + "&lt;tbody pageId='" + iPage + "'&gt;&lt;tr class='placeholder'&gt;&lt;/tr&gt;&lt;/tbody&gt;";
  }
  $("table").append(pagesHtml);

 //Initialize page 0
 var page0 = $(".table-container").find("tbody[pageId='0']");
  createPageContent(page0);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.table-container {
  overflow-y: auto;
  height: 400px;
  width: 500px;
  background-color: white;
}

tr {
  height: 20px;
}

tr.placeholder {
  height: 200px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class='table-container'&gt;
&lt;table&gt;
&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Title 1&lt;/th&gt;&lt;th&gt;Title 2&lt;/th&gt;&lt;th&gt;Title 3&lt;/th&gt;&lt;th&gt;Title 4&lt;/th&gt;&lt;th&gt;Title 5&lt;/th&gt;&lt;th&gt;Title 6&lt;/th&gt;&lt;th&gt;Title 7&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;div style="width: 400px; padding: 20px;"&gt;
Please click into the table and then press down and hold the &lt;b&gt;"page down"-key&lt;/b&gt;. Sometimes the browser don't fire the scroll-event again (mostly after 'removePageContent' is called). Especially in the Chrome-Browser. It's strange but with the Chrome-CPU-Profiler running, it works. Any ideas?
&lt;/div&gt;</code></pre>
</div>
</div>
</p>