Scroll listener on body

问题

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...

回答1:

Try with:

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

This should be supported by all browsers.

回答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");
};

回答3:

Because the body isn't scrolling, the window is.

In This example, you'll see that the event listener bound to the parent container is what's firing, because that element is the one that's actually scrolling.

The HTML looks like this:

<div id="container">
    <p id="content">some text</p>
</div>

The CSS looks like this:

#container {
    height: 200px;
    overflow-y: scroll;
}

#content {
    height: 1000px;
}

And the relevant JS looks like this:

$('#container').on('scroll', function() {
    console.log('#container');
});

$('#content').on('scroll', function() {
    console.log('#content');
});

回答4:

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.

来源：https://stackoverflow.com/questions/25951121/scroll-listener-on-body

标签

javascript

jquery

scroll

listener

document-body