jquery - How to make if scroll distance bigger than half img width, than scroll right to next? -

how make if scroll distance bigger half img width, scroll right next? (similar this)
can show me clue how it?
should store each item scrolllet value related index first?

var startx, stopx; $('.scroll').bind("scrollstart",function() {     // console.log("scroll start");     // console.log($(this).scrollleft());     startx = $(this).scrollleft();     return startx; });  $('.scroll').bind("scrollstop",function() {     // console.log("scroll stopped");     // console.log($(this).scrollleft());     stopx = $(this).scrollleft();     if((stopx - startx)> 400){         console.log('next');     }else{         console.log('stay');     } });  

html css

<div class="scroll">     <img><img><img> </div> .scroll{overflow:hidden;overflow-x:scroll;} img{width:800px;float:left;} 

$('.scroll').bind("scrollstop",function() {     // console.log("scroll stopped");     // console.log($(this).scrollleft());     stopx = $(this).scrollleft();     var dist = (stopx - startx);     $(this).animate({'scrollleft':math.round(dist/800) * 800+'px'},500); })