Scroll listener on body

一曲冷凌霜 提交于 2019-12-18 16:30:58

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!