水平滚动到容器内的下一个元素防止标准滚动

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 
}); 

使用