javascript - Listening horizontal scroll -

javascript - Listening horizontal scroll -

javascript has ability hear scrolling on fly (scrolltop(); isn't it). there function hear i've scrolled if i'm doing horizontally?

i have div of images, can scrolled horizontally ( see: http://jsfiddle.net/j5q1b8x9/).

.scroll-container { overflow-x: scroll; overflow-y: hidden; white-space: nowrap;

}

and want when scroll right, reddish box move left , vice versa. i've tried scrollleft(); , fires when i've reached end of images, isn't listening coordinates on fly.

bonus, it's possible implement kind of function each of images, using foreach path? i.e. if scroll 1 image viewport left right, reddish box move right left, , when new image pops viewport, jazz begins again, new image.

any ideas should test out create reddish box move mirror when scrolling left right?

if understand question works demo

var container = $(".scroll-container"); var box= $(".test-div"); var scrollx =container.scrollleft(); container.scroll(function(){ var delta =container.scrollleft() - scrollx; // direction < 0 left right scrollx =container.scrollleft(); if (delta<0) box.css({left:0, right:'auto'}); else box.css({left:'auto', right:0});

});

javascript jquery