Question

我有一段代码，正在改变我在mousescroll上的div背景，它在Chrome和Opera中运行良好，但它不适用于Firefox和IE / Edge。

我有两个div，内部有一个背景图像，在向下滚动时会改变，外部的一个更大，所以有空间可以滚动。在Firefox和IE / Edge中，滚动或不起作用或者跳过图像，有时甚至不会篡改滚动网站上的其他内容。

这是（我知道它编写得很糟糕，但我是javascript的新手，它完成了这项工作）：

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

});

Answer 1

问题在于firefox的平滑滚动功能和（参见this question）。这会导致jQuery scroll事件在每次滚动时多次触发，因此“＆＃39}缺失＆＃39;图像 - 它们被放入，但是它们被更新得如此之快以至于你无法看到它们。

不幸的是，由于您无法在人们的浏览器中禁用平滑滚动功能，因此对此并不是一个完美的解决方案。最好的解决方案是去抖动scroll事件处理程序。有很多方法可以实现去抖（google for some ideas）。一个简单的例子就是在超时后切换一个布尔值，并在每次运行函数时检查它：

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

这是您更新的JSFiddle。你可能需要玩去抖动时间。祝你好运。

Answer 2

我说你的代码按预期工作但我对scroll事件有几点想法。

只有在实际滚动时才会触发scroll事件。如果你的div不滚动，什么都不会发生。你可以通过使用另一个库来解决这个问题，查看this stackoverflow answer以获取一些建议的库。另外，请记住scroll事件非常敏感，因此图像的“跳过”可能只是滚动过快的结果。

我清理了您的代码，以便更好地使用change_background函数。

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

您的change_background个功能已合并为一个功能，numberofscroll将保持在一定范围内，以确保您想要的图像确实存在。

希望有所帮助！

Javascript在firefox和IE / edge中不起作用

2 个答案: