jQuery滚动事件只在Chrome中触发一次

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

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

网址：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; 
    }); 
});

来源

2012-12-24 TheSnooker

好像谷歌Chrome和其他浏览器都有不同的元素滚动值.. $('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

来源

2012-12-24 15:59:17 extramaster

谢谢：D这是需要的。我没有意识到这一点。 – TheSnooker

尝试从鼠标悬停/鼠标移开更改事件的MouseEnter /鼠标离开。

此外，你的'延迟'变量是否在更广泛的范围内声明？

最后，'amount'拼写为'm'。

来源

2012-12-24 14:59:36 Derek

延迟被声明在两个函数的范围之外，因为我不想传递它，所以我只是将其全球化。我试图改变鼠标/鼠标叶。与mouseover/mouseout相同的行为。我做了一些更多的测试，发现EVENT实际上在Chrome中触发很好。我可以看到console.log在Chrome中反复出现，所以我认为它不再是事件。这只剩下另一个东西，那就是scrollLeft（）和scrollRight（）方法。在Chrome中重复调用此方法是否存在一些问题？ – TheSnooker

jQuery滚动事件只在Chrome中触发一次

回答

相关问题