使用鼠標滾輪滾動時jQuery視差圖像不平滑

Question

我有一個帶有標題圖像的網站，試圖與之一起使用視差效果。

我正在使用以下JS來完成此任務：

    $(window).scroll(function() {
       var scrolledY = $(window).scrollTop();
       $('#container').css('background-position', 'left ' +  ((scrolledY)) + 'px');
});

我用了這個小提琴的一個例子： http ： //jsfiddle.net/QN9cH/1/

通過單擊並拖動滾動條向下滾動頁面時效果很好，但是當我用鼠標滾輪滾動時，圖像會跳轉很多並且根本不會平滑。

我已經做了大量研究，並嘗試了以下解決方案： Javascript-使用鼠標滾輪平滑視差滾動

但是，我無法使用我的實現。 我已經嘗試了多個jquery庫來實現平滑滾動，但也無法使其正常運行。

有沒有一種方法可以使鼠標滾輪的行為與我通過單擊並拖動滾動條進行手動滾動的行為相同？

Answer 1

這還不是答案（但是），但是我注意到大量的Windows機器都帶有滾輪，這些滾輪可以在頁面中逐行“單擊”。

我不確定這是否是您要面對的問題，但是所有這些美麗的視差效果在昂貴的鼠標以及那些超光滑的Apple觸控板和鼠標上都能很好地發揮作用，但是突然搖晃起來，在普通的Windows鼠標上看起來很糟糕。