I have got a Facebook news feed to display inline in an endless horizontal scrolling container which should only scroll between the news elements and prevent the default continuous scrolling behaviour.
This code entered manually already focuses (not exactly) on the specific news, eg. focusedNews = 1 -> first news-container is focused. Because i know every container has a width of 500px and i animate the parent containers position, to move the wanted element into the focus.
$(".fbNews").animate({left: -(focusedNews - 1) * 500}, 500);
Firstly i detect in which direction the user scrolls which works and logs the direction to the console. Then i either add or subtract 1 to the focusedNews Index but the scroll event happens way more often than once. I thought of _.debounce or _.throttle the scroll event, but that didn't help.
How can i animate to the next or previous element on scroll and prevent the default behaviour?
I use the fullpageJS library for such effects on vertical scroll and horizontal slides in other projects, but the library only works for full pages and not inside other containers.