Why window onscroll event does not work?

Question

I want to execute the window onscroll event, but I don't know why it doesn't work on all browsers(firefox, chrome, etc), and there is no errors occurred.

Full code:

var elem = document.getElementById('repeat');
var show = document.getElementById('show');

for (i = 1; i <= 300; i++) {
    elem.innerHTML += i + "<br/>";
}


window.onscroll = function () {
    show.innerHTML = document.body.scrollTop;
};

#show {
    display:block;
    position:fixed;
    top:0px;
    left:300px;
}

<pre id="repeat"></pre>

<div style="position:relative;">
    <div id="show">x</div>
</div>

Also jsfiddle: http://jsfiddle.net/sqo0140j

What is the problem ?

Do you have enough content to scroll? http://jsfiddle.net/pfmqjcx2/ — dfsq, Apr 18 '15 at 14:49
All seems fine to me. Can you create a jsfiddle so we can see the issue you're having please. http://jsfiddle.net/ — NewToJS, Apr 18 '15 at 14:53
I'm pretty sure you will not be able to reproduce it in fiddle. Which means this is something in your other code and it's not possible to help you. — dfsq, Apr 18 '15 at 14:57
It's working fine, your fiddle AND your snippet - Chrome, Win8 — Drakes, Apr 18 '15 at 15:04
Do you have any greasemonkey or tampermonkey scripts running in your browser? — Drakes, Apr 18 '15 at 15:09
@Drakes: there is no any greasemonkey or tampermonkey or something like that — Lion King, Apr 18 '15 at 15:11
This should be obvious but amazingly enough it often isn't. When you make an example of your problem you need to make sure the example replicates the issue you're having. A jsfiddle that works like it should isn't helpful to anyone. — JJJ, Apr 18 '15 at 15:14
Is you script references externally with the src attribute? IN that case it may not work. — mmcglynn, Mar 17 '19 at 12:13

Drakes · Accepted Answer · 2015-04-18T15:33:31.383

15

You said something interesting:

x changed to 0 and remains as is.

The only way in your code that can happen is if the onscroll function block makes a change because your HTML sets x.

If your window.onscroll = function() is indeed firing, but you are not getting the right scroll position (i.e. 0), try changing the way the scroll position is returned:

window.onscroll = function () {
    show.innerHTML = document.documentElement.scrollTop || document.body.scrollTop;
};

I found out that document.documentElement.scrollTop always returns 0 on Chrome. This is because WebKit uses body for keeping track of scrolling, but Firefox and IE use html.

Please try your updated snippet:

var elem = document.getElementById('repeat');
var show = document.getElementById('show');

for (i = 1; i <= 300; i++) {
    elem.innerHTML += i + "<br/>";
}


window.onscroll = function () {
    show.innerHTML = document.documentElement.scrollTop || document.body.scrollTop;
};

#show {
    display:block;
    position:fixed;
    top:0px;
    left:300px;
}

<pre id="repeat"></pre>

<div style="position:relative;">
    <div id="show">x</div>
</div>

edited Apr 18 '15 at 15:33

answered Apr 18 '15 at 15:27

Drakes

23,254
3
51
94

What happens when you run this snippet? – Drakes Apr 18 '15 at 15:36
Works fine, but when copy this code to my editor and run it on my browsers, still does not works. – Lion King Apr 18 '15 at 15:37
So, the snippet works in your browser, but your offline file doesn't work in the same browser? – Drakes Apr 18 '15 at 15:39
We're going to have to see your HTML in your offline file. Can you post it to like pastebin.com? – Drakes Apr 18 '15 at 15:40
2

Finally, I knew the problem -> in my css `html, body {margin:0;}`. when remove `margin:0;`, the code works fine. – Lion King Apr 18 '15 at 15:43
3

lol! But you had no `html, body {margin:0;}` in the snippet. You should write up your own answer for anyone who stumbles upon a similar problem. – Drakes Apr 18 '15 at 15:44
Yes, and for that reason the code was works fine. and I'm forgot add it in the snippet. – Lion King Apr 18 '15 at 15:46
Anyway, Thank you for continued help me, and you will take the best answer. – Lion King Apr 18 '15 at 15:47
I'll leave my answer to help others who might have the Chrome issue - And thanks man! – Drakes Apr 18 '15 at 15:48
@Lion King Holly cow! The margin zero saved my life... thanks!!!!! In my case also I had heigth:100% too. Thanks – Cyberdelphos Mar 18 '16 at 00:22

score 1 · Answer 2 · answered Feb 06 '17 at 03:59

For me the statement document.body.scrollTop; works well in Chrome and Opera, but on Firefox returns 0.

Viceversa the statement document.documentElement.scrollTop; works good on Firefox but not in Chrome and Opera...

Maybe document.body.scrollTop; is not well supported by FF

Possible Solutions:

I tried:

Math.max(document.body.scrollTop, document.documentElement.scrollTop);

and

 document.body.scrollTop || document.documentElement.scrollTop;

They both works well on all above browsers.

score 1 · Answer 3 · answered Apr 21 '20 at 10:15

I had also the same problem , but I didn't know the proper reason for that . In my case

window.onscroll = function () {
   console.log(document.documentElement.scrollTop || document.body.scrollTop);
 };

this code didn't work even after removing margin:0; and padding:0; . But by mention the addEventListener on the document.body it is worked

document.body.addEventListener('scroll',()=>{
  console.log(document.documentElement.scrollTop || document.body.scrollTop);
})

score 0 · Answer 4 · answered Sep 28 '17 at 22:26

This question has been answered, but I wanted to include details of my situation that prevent onscroll from working.

I have datacontainer that had its own scroll bar which overrides the built in window scroll bar. I didnt notice this until I started giving a more thorough look at the elements on the page using chrome developer. My outer tag looked like this,

This caused two scroll bars to appear on the left. This was because the property, overflow:auto, was telling the data container to make another scroll bar.

Once I removed the overflow:auto I could now correct hit the onscroll event.

score 0 · Answer 5 · answered Dec 01 '21 at 13:06

Because a lot of people use W3Schools i wanted to leave this here. This simple scroll event wasn't firing

   window.onscroll = function () { myFunction() };

    var navbar = document.getElementById("navbar");
    var sticky = navbar.offsetTop;

    function myFunction() {
        if (window.pageYOffset - 20 >= sticky) {
            navbar.classList.add("sticky");
        }
    }

Until I removed < link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> and everything was working again flawlessly.

Julesezaar · Answer 6 · 2021-12-20T13:53:53.130

For people having issues with this function. Another reason that it looks like it is not working is that you define it multiple times.

window.onscroll = function() {
    console.log('scroll 1');
};

// some other js code

window.onscroll = function() {
    console.log('scroll 2');
};

Only the last one gets executed since it overwrites your first declaration. The solution is then

window.addEventListener('scroll', function() {
    console.log('scroll 1');
})

window.addEventListener('scroll', function() {
    console.log('scroll 2');
})

Why window onscroll event does not work?

6 Answers6

Possible Solutions:

Linked