detecting scroll event on a page-scoped div
<p>When a css file contains an instruction like this:</p>

<pre><code>body {
  width: 100%;
  height: 100%;
}
</code></pre>

<p>A JS code like the following does not detect the scrolling event. </p>

<pre><code>$(window).on('scroll', function(){
   alert('this alert does not fire');
});
</code></pre>

<p>I guess with that css, there is no possibility of a scroll event and hence the reason why the scrolling event does not fire. </p>

<p>So I wrapped the entire page body content into a div, like this:</p>

<pre><code>&lt;body&gt;

  &lt;div canvas="container"&gt;
      the entire page content here
  &lt;/div&gt;

&lt;/body&gt;
</code></pre>

<p>In this case, what would be the correct version of the JS code below so we can catch these alerts in a timely fashion?  </p>

<pre><code>$(window).on('scroll', function(){

   if( $(window).scrollTop()&gt;50 ){
       alert('1');
   } 
   else {
       alert('2');
   }
});
</code></pre>