Scrolling horizontally to the next element inside the container prevents standard scrolling
I have a Facebook news feed to display an inline-infinite horizontal scrolling container that should only scroll news items and prevent continuous scrolling by default.
This manually entered code already focuses (not quite) on specific news, for example. focusNews = 1 → the first news container is focused. Since I know that each container is 500px wide and I am animating the parent position of the container to bring the desired element into focus.
$(".fbNews").animate({left: -(focusedNews - 1) * 500}, 500);
First, I determine which direction the user who is running is scrolling in and writes the direction to the console. Then I either add or subtract 1 in focusNews Index, but the scroll event happens more often than once. I thought about _.debounce or _. scrolling event fading, but it didn't help.
How can I animate the next or previous scroll element and prevent the default behavior?
I use the fullpageJS library for such effects on vertical scrolls and horizontal slides in other projects, but the library only works for full pages, not inside other containers.
source to share
The sly.js library fills in everything http://darsa.in/sly/ needed . The horizontal scrolling behavior works in any container on the site.
I have updated the JSFiddle to work with this library. Fiddle
var sly = new Sly( frame, options [, callbackMap ] );
It's not in vanilla JS, but it works really well, even in a mobile browser with a touch interface and is easy to use with useful events like active
sly.on('active', function (eventName) {
//do Something if an element got activated
});
source to share