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

Ashes

Answer 1

Try with:

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

This should be supported by all browsers.

Ecthyma

I know I can on window, but I want to add scroll listener to html tag. – Ashes

and what different effect do you expect? – Ecthyma

I am trying add scroll listener in the html tag level, not to js object like window, but I think I need to change my approach. – Ashes

Answer 2

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');
});

Carpophagous

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? – Ashes

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

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 – Ashes

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

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? – Katrinka

Answer 3

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

Unproductive

Or you could just refer to document.body - developer.mozilla.org/en-US/docs/Web/API/Document/body – Emplace

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

Acculturate

Answer 5

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

 <script>
 window.onscroll = function() {myFunction()};

Keyek