detecting scroll event on a page-scoped div

Question

When a css file contains an instruction like this:

body {
  width: 100%;
  height: 100%;
}

A JS code like the following does not detect the scrolling event.

$(window).on('scroll', function(){
   alert('this alert does not fire');
});

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

So I wrapped the entire page body content into a div, like this:

<body>

  <div canvas="container">
      the entire page content here
  </div>

</body>

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

$(window).on('scroll', function(){

   if( $(window).scrollTop()>50 ){
       alert('1');
   } 
   else {
       alert('2');
   }
});

Is there anything in the body thats taller than the window width? Try setting the body and html height to 200% and see if it works. — Jordan Ellis
– Jordan Ellis, Commented Nov 8, 2016 at 20:44
canvas="container" is a confusing attribute. with class="container" and CSS: .container {min-height: 2000px;} you should get the scroll. — Javier Rey
– Javier Rey, Commented Nov 8, 2016 at 20:51

gaetanoM · Accepted Answer · 2016-11-08 21:37:03Z

3

When a page is styled like:

body {
    width: 100%;
    height: 100%;

}

you cannot listen for the window scroll event because there is nothing to scroll. Instead, you may use mouse wheel event:

$(window).on('wheel', function(){
  console.log('this alert fires');
});

body {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

UPDATE

You may handle the following events:

wheel (when you use the mouse wheel)
mousedown (when you click on the scroll bar of the doc to scroll)
keydown (ctrl+home, ctrl+hend, down-up arrow, pgdown and pgup: keyboard scrolling)

The new snippet:

$(document).on('wheel mousedown keydown', function(e){
  if (e.type == 'wheel' || (e.target.id == 'full-content-div' && e.type == 'mousedown' && e.clientX >= $('div[canvas="container"]').width()) ||
      (e.type == 'keydown' && ((e.ctrlKey && (e.keyCode  == 36 || e.which == 35)) ||
                               (!e.ctrlKey && (e.keyCode  == 33 || e.which == 34 || e.which == 38|| e.which == 40))))
     ) {
    console.log(e.type + ' event');
  }
});

div[canvas="container"]{
  width: 100%;
  height: 100vh;
  overflow: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div canvas="container" id="full-content-div">
    the entire page content here
</div>

edited Nov 8, 2016 at 21:37

answered Nov 8, 2016 at 20:49

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Average Joe Over a year ago

That's interesting. But it is not the same as scroll. So if the user drag the scroll bar down or keyboard down arrow is involved, that event won't fire. Isn't there a way to detect the scrolling event on that div ( the one that wraps the entire page content )? The browser still mounts the vertical scroll bar to its usual spot. When I right click and inspect the scroll bar, inspector points to the <div canvas="container" id="full-content-div">. In other sites, the scroller would point to <html>. Does this give us a clue in creating an alternative solution around the canvas-container div?

gaetanoM Over a year ago

@AverageJoe I updated my answer adding a new snippet. I hope this could answer your question.

Average Joe Over a year ago

Dear gaetanoM, thanks a lot for taking the time to address all of the ways that a scroll event can be accounted for. I plugged in your code and sure enough, it does catch the scrolling - including the touchpad gesture! But... I still have to figure out a way to determine the scroll position. My whole goal in this endeavor was to fix the navbar when $(window).scrollTop()>50) (which is the point to run $('.navbar').addClass('navbar-fixed'); ). Do you have any suggestions that would pull that scroll position off? -- Also, pls correct the typo in your CSS snippet.

Average Joe Over a year ago

I already got that issue taken care of. this interesting code gives me the sense of scrolling position.

var the_content = document.getElementById('full-content-div'); 		var scrollPosition = JSON.stringify( getTopPosition( the_content ) );

and the function that makes it happen is as follows:

function getTopPosition(el){ 	  for (var pos=[0,0];el;el=el.offsetParent){ 		pos[1] +=  el.offsetTop-el.scrollTop; 	  } 	  return -1 * pos[1];  	}

Collectives™ on Stack Overflow

detecting scroll event on a page-scoped div

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related