Question

我正在研究jQuery悬停滚动导航。我将scrollLeft和scrollTop方法与.mouseover()和.mouseout()结合使用。在Chrome / Safari中，一切似乎都很好。我注意到了意想不到的行为。主要是滚动事件似乎只触发一次。我不确定是什么导致它或者是否有办法解决这个问题。

无论如何，这里是我的代码和网站的链接，以便您可以自己查看行为。任何帮助都会很棒。

网址：http://www.derekhutchinson.com

var delay = false;
function Movehorizonal(speed, ammount) {
    var curpos = $('body,html').scrollLeft();
    $("body,html").animate({
        scrollLeft: curpos + ammount
    }, speed);
    delay = setInterval(function() {
        //console.log("tick_horizontal");
        var curpos = $('body,html').scrollLeft();
        $("body,html").animate({
            scrollLeft: curpos + ammount
        }, speed);
    }, speed);
}

$(function() {

    var speed = 400;
    $('#goLeft').mouseover(function() {
        Movehorizonal(speed, -200);
    });
    $('#goLeft').mouseout(function() {
        $("body,html").stop();
        clearInterval(delay);
        delay = false;
    });
});

Answer 1

似乎谷歌浏览器和其他浏览器都有不同元素的滚动值.. $('body').scrollLeft();似乎只适用于webkit浏览器，而$('html').scrollLeft();不适用

所以，替换

var curpos = $('body,html').scrollLeft();

使用

var curpos = Math.max($('body').scrollLeft(), $('html').scrollLeft());

和

var curpos = $('body,html').scrollTop();

与

var curpos = Math.max($('body').scrollTop(), $('html').scrollTop());

它按预期工作

JS：

function Movehorizonal(speed, ammount) {
    var curpos = Math.max($('body').scrollLeft(), $('html').scrollLeft());
    $("body,html").animate({
        scrollLeft: curpos + ammount
    }, speed);
    delay = setInterval(function() {
        //console.log("tick_horizontal");
        var curpos = Math.max($('body').scrollLeft(), $('html').scrollLeft());
        $("body,html").animate({
            scrollLeft: curpos + ammount
        }, speed);
    }, speed);
}

function Movevertical(speed, ammount) {
    var curpos = Math.max($('body').scrollTop(), $('html').scrollTop());
    $("body,html").animate({
        scrollTop: curpos + ammount
    }, speed);
    delay = setInterval(function() {
        //console.log("tick_vertical");
        var curpos = Math.max($('body').scrollTop(), $('html').scrollTop());
        $("body,html").animate({
            scrollTop: curpos + ammount
        }, speed);
    }, speed);
}

Live Demo | Source

Answer 2

尝试将事件从mouseover / mouseout更改为mouseenter / mouseleave。

另外，你的“延迟”变量是在范围更广的地方声明的吗？

最后，'金额'拼写为'm'。

jQuery滚动事件仅在chrome中触发一次

2 个答案: