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中觸發一次

回答

相關問題