Javascript doesn't work in firefox and IE/edge

Question

I have a piece of code, that's changing my div background on mousescroll and it's working fine in Chrome and Opera, but it doesn't in Firefox and IE/Edge.

I have two divs, the inner one has a background image that is changing on scroll down, the outer one is simply bigger so there is space to scroll. In Firefox and IE/Edge, the scroll or doesn't work either skips an image, sometimes even doesn't purceed to scrolling the rest of the content on the website.

http://jsfiddle.net/s6qrfo9n/1/ Any ideas why?

Here it is (and I know it's poorly written, but I'm new to javascript and it does the job):

$(document).ready(function(){
    var numberofscroll = 0;
    var lastScrollTop = 0;
    $("#home").scroll(function(){
        var st = $(this).scrollTop();
        (st > lastScrollTop) ? numberofscroll++ : numberofscroll--;
        console.log(numberofscroll);
        console.log(lastScrollTop);
        console.log(st);
        if (numberofscroll<2){
            change_background2(numberofscroll);
        }
        else if (numberofscroll<3){
            change_background3(numberofscroll);
        }
        else if (numberofscroll<4){
            change_background4(numberofscroll);
        }

        lastScrollTop = st;
    });

    function change_background2(numberofscroll){
    var i; 
    for (i = 2; i <= 2; i++) {
        $("#home").css("background-image","url('images/movie_" + i + ".jpg')");
    }
}

      function change_background3(numberofscroll){
    var i; 
    for (i = 3; i <= 3; i++) {
        $("#home").css("background-image","url('images/movie_" + i + ".jpg')");
    }
}

    function change_background4(numberofscroll){
    var i; 
    for (i = 4; i <= 4; i++) {
        $("#home").css("background-image","url('images/movie_" + i + ".jpg')");
    }
}

});

@ShanKhaliq I'm trying to make it work right now, but the images do not change for some reason ... http://jsfiddle.net/denea/s6qrfo9n/ — Dennis Novac, Nov 27 '15 at 21:47
@ShanKhaliq Thanks a lot, updated with a better explanation of the issue — Dennis Novac, Nov 27 '15 at 21:54

score 1 · Accepted Answer · edited May 23 '17 at 12:15

The problem lies in the smooth scrolling feature of firefox and ie (see this question). This causes the jQuery scroll event to fire multiple times every time you scroll, thus the 'missing' images--they are being put in, but then they're replaced so fast you can't see them.

Unfortunately, since you can't disable the smooth scrolling feature on people's browsers, there isn't really a perfect solution to this. The best solution is to debounce your scroll event handler. There are many ways to implement a debounce (google it for some ideas). A simple one would be just toggling a boolean after a timeout and checking it every time you run the function:

var dontHandle = false;
$("#home").scroll(function () {
    if (dontHandle) return; // Debounce this function.
    dontHandle = true;

    window.setTimeout(function() {
        dontHandle = false;
    }, 400); // Debounce!--don't let this function run again for 400 milliseconds.
});

Here's your updated JSFiddle. You may need to play with the debounce time. Best of luck.

score 0 · Answer 2 · edited May 23 '17 at 11:52

I'd say your code is working as intended but I have a couple thoughts about the scroll event.

The scroll event will only be fired if scrolling actually takes place. Nothing will happen if your div doesn't scroll. You could get around that by using another library, check out this stackoverflow answer for some suggested libraries. Also, keep in mind that the scroll event is extremely sensitive, so the "skipping" of images may simply be a result of scrolling too fast.

I cleaned up your code to make better use of the change_background function.

var numberofscroll = 0;
var lastScrollTop = 0;

$(document).ready(function(){

    $("#home").scroll(function(e) {
        var st = $(this).scrollTop();

        console.log(numberofscroll, lastScrollTop, st);

        (st > lastScrollTop) ? numberofscroll++ : numberofscroll--;

        //make sure numberofscroll stays in range
        if(numberofscroll <= 0) {
            numberofscroll = 1;
        } else if(numberofscroll > 4) {
            numberofscroll = 4;
        }

        change_background(numberofscroll);

        lastScrollTop = st;
    });

    function change_background(numberofscroll) {

        $("#home").css("background-image","url('http://coverjunction.s3.amazonaws.com/manual/low/colorful" + numberofscroll + ".jpg')");
    }
});

Your change_background functions have been rolled into one function and numberofscroll will stay within a certain range to ensure the image you want actually exists.

Hope that helps!

Thanks for cleaning, but it didn't help with Firefox/IE/Edge. I don't scroll too fast, I single scroll it. I thought it could be something in the css, but it skips images ... — Dennis Novac, Nov 27 '15 at 22:41

Javascript doesn't work in firefox and IE/edge

2 Answers2