Scroll listener on body

Question

I would like to ask about scroll listener. I want to add scroll listener on body but it seems doesnt work.

$('body').scroll(function(){
  console.log('SCROLL BODY');
});

I create basic example on fiddle, can someone explain me why it doesn't to work? Sorry for nubies question...

Answer 1

The Pure JS Solution

Everything is very simple: just use addEventListener for scrolling event.

document.body.addEventListener('scroll', function( event ) {
    console.log(';{};');
} );

And make body scrollable with CSS:

:root {
    overflow: hidden;
}

body {
    overflow-y: scroll;
    max-height: 100vh;
}

I do not know why simple handler assignment doesn't work. If you know why — please, tell me.

document.body.onscroll = function( event ) {
    console.log('You will never see this message.');
};

---

Also you could do this:

document.body.onwheel = function( e ) {
    ...
};

This event will be triggered only when you using a wheel (for me that wasn't obvious, actually), so if you will scroll your page with a scrollbar it will not trigger.

Answer 2

All the answers above expect jQuery being the framework of use. A framework agnostic / plain JS implementation could look like this

ES 5:

// ES 5 :
document.getElementsByTagName('body')[0].onscroll = function() {
    console.log("scrolling");
};

ES 6 (and above) :

// ES 6 (and above)
document.getElementsByTagName('body')[0].onscroll = () => {
    console.log("scrolling");
};