13

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

user1297783
  • 193
  • 1
  • 1
  • 9

5 Answers5

10

Try with:

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

This should be supported by all browsers.

Lorenzo Marcon
  • 8,029
  • 5
  • 38
  • 63
9

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');
});
Robert
  • 260
  • 1
  • 7
  • 1
    So your saying to have scroll on body I would need to set height explicity in css, otherwise the body is constatly expanded and scroll is never there? – user1297783 Sep 20 '14 at 17:03
  • 1
    Correct - the body doesn't scroll in your case, so a listener bound to it won't work. Bind a listener to the window and you're fine. – Robert Sep 20 '14 at 17:05
  • I know I can bound listener to window, but I want to add scroll listner to html tag, so in my case windows is not an options, at least if I not gonna change my approach – user1297783 Sep 20 '14 at 17:07
  • Scrolling on body is an unusual thing to do. I would change your approach if possible to reduce future headaches. Otherwise, you'll need to add CSS to your body to give you the effect you're looking for. – Robert Sep 20 '14 at 17:13
  • Even if the window is scrolling instead of the body, why does << document.body.onscroll = f >> work while << document.body.addEventListener("scroll", f) >> doesn't? – Chinmay Ghule Dec 09 '22 at 06:22
8

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");
};
mareks
  • 774
  • 6
  • 5
3

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.

Monsieur Pierre Doune
  • 687
  • 8
  • 29
1

Why not simply using https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onscroll2

 <script>
 window.onscroll = function() {myFunction()};
human
  • 467
  • 4
  • 6