Create a Scroll Event with add Event Listener - Javascript

Question

I'm trying to achieve something in vanilla JS and it's not playing ball. I have an element I want to change color after a certain scroll length, but when I use addEventListener('scroll', function) etc it's not working, but I'm not getting any errors in my console.
Any help would be awesome.

Emily

The code is below and I have a pen here: https://codepen.io/emilychews/pen/eRYwzm

HTML

<div class="box"></div>

CSS

body {height: 200vh;}

.box {
  width: 200px;
  height: 200px;
  background: red;
}

JAVASCRIPT

var box = document.getElementsByClassName('box')[0];

window.addEventListener('scroll', function() {

  if (box.scrollTop > 0) {
    box.style.background = "blue";
  }

});

That's because box.scrollTop always returns 0. Add console.log(box.scrollTop); above your if() statement and you will see the result of box.scrollTop in the console. — NewToJS
– NewToJS, Commented Jun 4, 2017 at 17:00

XCS · Accepted Answer · 2017-06-04 17:00:26Z

3

You have to get the scrollTop on the document body element, not on your box. In your case, box.scrollTop will always be 0.

Replace this:

  if (box.scrollTop > 0) {
    box.style.background = "blue";
  }

with this:

  if (document.body.scrollTop > 0) {
    box.style.background = "blue";
  }

Also note, that as of now it's better to use window.pageYOffset as document.body.scrollTop is deprecated in strict mode. Read this to learn more about scroll detection on the entire window.

Demo: https://codepen.io/anon/pen/mwdZwL

answered Jun 4, 2017 at 17:00

XCS

28.3k28 gold badges105 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create a Scroll Event with add Event Listener - Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related