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

Question

我有一个Facebook新闻源在无限的水平滚动容器中内联显示，该容器只应在新闻元素之间滚动并阻止默认的连续滚动行为。

JS FIDDLE

手动输入的代码已经（不完全）关注特定新闻，例如。 focusedNews = 1 - ＆gt;第一个新闻容器是重点。因为我知道每个容器的宽度都是500px，并且我为父容器位置设置动画，以便将所需元素移动到焦点中。

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

首先，我检测用户滚动的方向，并将方向记录到控制台。然后我要向focusedNews索引添加或减去1，但滚动事件的发生方式往往不止一次。我想到了_.debounce或_.throttle滚动事件，但这没有帮助。

如何在滚动时为下一个或上一个元素设置动画并阻止默认行为？

我在其他项目中使用fullpageJS库对垂直滚动和水平幻灯片进行此类效果，但该库仅适用于整页而不适用于其他容器。

Answer 1

库sly.js满足了所需的一切 http://darsa.in/sly/。 水平滚动行为适用于网站上的任何容器。

我更新了JSFiddle以使用该库。 Fiddle

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

它不在vanilla JS中，但它运行得很好，即使在带触摸的移动浏览器上也很容易使用，如活动

等有用的事件

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