2010-05-15 277 views
4

我目前有一個網站,是一個sidescroller(http://www.studioimbrue.com),我試圖綁定滾動鼠標滾動橫盤。目前我使用的是在thehorizo​​ntalway.com上找到的一個(稱爲thw.js),但它似乎不適用於所有瀏覽器(Chrome)。jquery水平滾動鼠標滾輪

我試圖讓這個工作:http://brandonaaron.net/code/mousewheel/docs,只需滾動整個窗口,沒有別的。文檔非常有限,所以我無法弄清楚。任何幫助表示讚賞。

回答

7

我剛剛回答了關於水平滾動div的this question,我還包括一些代碼來使用鼠標滾輪或者只是用鼠標拖動或拖動...也許有些代碼會給你一個想法?

爲了闡述一下,mousewheel函數爲您提供了事件對象和增量。

$('#container').bind('mousewheel', function(event,delta){ 
if (delta > 0) { 
    // mousewheel is going up; 
} else { 
    // mousewheel is going down 
} 
}); 

delta的值取決於滾動滾輪的速度。如果你努力嘗試,我已經看到從+50到-50的範圍:P

+0

我明白你在說什麼,但我不明白實際的「滾動」部分。在你的其他文章中,我看到this.scrollLeft - =(delta * 30);但我無法在我的工作。我希望整個窗口滾動,而不是一個div,所以我試着改變('#container')到(窗口)。 – steve 2010-05-16 19:19:52

+0

我不確定這是否正確,但我通過以下方式在其他瀏覽器中正常工作: $(window).bind('mousewheel',function(event,delta){if(delta> 0){ window.scrollBy(-80,0); } else window.scrollBy(80,0); }); 但它似乎在Chrome中很漂亮... – steve 2010-05-16 19:34:58

+0

你是什麼意思的越野車? – Mottie 2010-05-16 23:30:56

1

我在註釋中使用了$(window).bind方法,但它不會向後滾動,只能向前和向下滾動在輪子上。

<script> 
    $(window).bind('mousewheel', function(event, delta) { 
     if (delta > 0) { window.scrollBy(-80,0); 
     } else window.scrollBy(80,0) ; 
    }); 
</script> 
0

上述評論的這種解決方案的工作原理,但只有當在頁面上的實際元素被模糊。

$(window).bind('mousewheel', function(event, delta) { 
    if (delta > 0) { window.scrollBy(-80,0); 
    } else window.scrollBy(80,0) ; 
}); 

如果只是鼠標放在空的空間(例如,如果你的內容很短,而且有一些窗口在底部留下的),它會連續工作約一個滾動,再突破(直到你回滾左),這就是爲什麼人們會認爲滾動只能以一種方式進行。這也似乎是人們推薦的所有花式滾動插件的情況。希望這有助於人們在未來找到解決方案。