javascript - Horizontal scroll to next element inside a container prevent standard scroll -
i have got facebook news feed display inline in endless horizontal scrolling container should scroll between news elements , prevent default continuous scrolling behaviour.
this code entered manually focuses (not exactly) on specific news, eg. focusednews = 1 -> first news-container focused. because know every container has width of 500px , animate parent containers position, move wanted element focus.
$(".fbnews").animate({left: -(focusednews - 1) * 500}, 500);
firstly detect in direction user scrolls works , logs direction console. either add or subtract 1 focusednews index scroll event happens way more once. thought of _.debounce or _.throttle scroll event, didn't help.
how can animate next or previous element on scroll , prevent default behaviour?
i use fullpagejs library such effects on vertical scroll , horizontal slides in other projects, library works full pages , not inside other containers.
the library sly.js fullfills needed http://darsa.in/sly/. horizontal scroll behaviour works in container on site.
i updated jsfiddle work library. fiddle
var sly = new sly( frame, options [, callbackmap ] );
it's not in vanilla js, works pretty well, on mobile browser touch , easy use usefull events such active
sly.on('active', function (eventname) { //do if element got activated });
Comments
Post a Comment