Javascript addEventListener working in Firefox and IE but not Chrome?

Question

This works in Firefox and Internet Explorer, but does not work in Chrome, I have tested on multiple computers running Chrome.

Is there something I have missed that causes this not to work in Chrome?

<script>
document.addEventListener('DOMContentLoaded', function() { 
    var dealBar = function() {
        var scroll = document.documentElement.scrollTop;
        var sidebarDeals = document.querySelector('#sidebar__deals');
        var sidebarAdverts = document.querySelector('#sidebar__adverts');
        var adBottom = sidebarAdverts.offsetTop + sidebarAdverts.clientHeight;

        if (scroll > adBottom) {
            sidebarDeals.className = "sidebar__deals--fixed";
        } else {
            sidebarDeals.className = "sidebar__deals--relative";
        }       
    }

    window.addEventListener('scroll', function(e){
        dealBar();
    });
    dealBar();
});
</script>

I get no errors in the Console.

In Firefox and Internet Explorer it changes the class name when scroll is more than adBottom, in Chrome it does nothing at all. — Ash, Feb 06 '17 at 14:06
where did you add your code? it's working for me https://jsfiddle.net/ar4rd6jz/ — Sanjay Nishad, Feb 06 '17 at 14:14
Just for fun play around with `document.documentElement.scrollTop`, including things like `document.body.scrollTop`. — , Feb 06 '17 at 14:14

score 1 · Answer 1 · edited May 23 '17 at 10:29

Your code is correclty triggered when I remove the first part related to the DOMContentLoaded event: demo.

I think your problem lies here, Chrome probably executes your code after the DOM is loaded, thus your code is never executed.

Try to remove this part:

<script>
//document.addEventListener('DOMContentLoaded', function() { 
    var dealBar = function() {
        var scroll = document.documentElement.scrollTop;
        var sidebarDeals = document.querySelector('#sidebar__deals');
        var sidebarAdverts = document.querySelector('#sidebar__adverts');
        var adBottom = sidebarAdverts.offsetTop + sidebarAdverts.clientHeight;

        if (scroll > adBottom) {
            sidebarDeals.className = "sidebar__deals--fixed";
        } else {
            sidebarDeals.className = "sidebar__deals--relative";
        }       
    }

    window.addEventListener('scroll', function(e){
        dealBar();
    });
    //dealBar();
//});
</script>

Also, regarding the scroll position, you may want to check this post: JavaScript get window X/Y position for scroll

Tried this, but not luck. I added consolelog(1) and on scrolling it is logging 1, so must be something else in the rest of the script that Chrome doesn't like. — Ash, Feb 06 '17 at 14:26
I just did console.log(scroll); in the function and in chrome it is returning 0. var scroll = document.documentElement.scrollTop; Is the problem in chrome, is there something there that doesn't work with chrome? — Ash, Feb 06 '17 at 14:31
@ash I think you may find this post useful http://stackoverflow.com/questions/3464876/javascript-get-window-x-y-position-for-scroll — GôTô, Feb 06 '17 at 14:36

score 1 · Accepted Answer · answered Feb 06 '17 at 14:46

Wasn't a problem with the event listener.

Changing

var scroll = document.documentElement.scrollTop;

to

var scroll = (document.documentElement.scrollTop || document.body.scrollTop);

This done the trick, seems Chrome bases its scroll position off of <body> and Firefox bases it off of <html>.

Chrome was returning 0 for scroll causing the function not to trigger the class change.

Javascript addEventListener working in Firefox and IE but not Chrome?

2 Answers2