水平滾動到容器內的下一個元素防止標準滾動

Question

我有一個Facebook新聞提要在無限水平滾動容器中內聯顯示，該滾動容器應該只在新聞元素之間滾動，並防止默認的持續滾動行爲。

JS FIDDLE

此代碼手工輸入已經集中（不完全）的具體消息，如。 focusedNews = 1 - >第一個新聞集裝箱是重點。因爲我知道每個容器的寬度都是500px，並且我爲父容器的位置設置了動畫，將想要的元素移動到焦點上。

$(".fbNews").animate({left: -(focusedNews - 1) * 500}, 500); 

首先，我檢測用戶滾動哪個方向工作並記錄方向到控制檯。然後，我要麼增加或減少1 focusedNews指數，但滾動事件發生的方式比一次。我想到_.debounce或_.throttle滾動事件，但沒有幫助。

如何動畫到滾動上的下一個或上一個元素並防止默認行爲？

我在其他項目中使用fullpageJS庫來處理垂直滾動和水平幻燈片的效果，但該庫僅適用於整頁而不適用於其他容器。

Answer 1

庫sly.js滿載需要的所有東西 http://darsa.in/sly/。 水平滾動行爲適用於網站上的任何容器。

我更新了JSFiddle以使用該庫。 Fiddle

var sly = new Sly(frame, options [, callbackMap ]); 

這不是在香草JS，但它工作得很好，即使是在移動瀏覽器，觸摸，很容易與有用的事件，如積極

sly.on('active', function (eventName) { 
    //do Something if an element got activated 
}); 

使用