breadcrumb menu tracking mouse to move crumbs

by ampersand

HTML

<div id="scroller"><a href="#">one</a><a href="#">two</a><a href="#">three</a><a href="#">four</a><a href="#">five</a><a href="#">six</a><a href="#">seven</a><a href="#">eight</a><a href="#">nine</a><a href="#">ten</a><a href="#">eleven</a><a href="#">twelve</a><a href="#">thirteen</a><a href="#">fourteen</a><a href="#">fifteen</a><a href="#">sixteen</a><a href="#">seventeen</a><a href="#">eighteen</a><a href="#">nineteen</a><a href="#">twenty</a><a href="#">twenty-one</a><a href="#">twenty-two</a><a href="#">twenty-three</a><a href="#">twenty-four</a><a href="#">twenty-five</a><a href="#">twenty-six</a><a href="#">twenty-seven</a><a href="#">twenty-eight</a><a href="#">twenty-nine</a><a href="#">thirty</a><a href="#">thirty-one</a><a href="#">thirty-two</a><a href="#">thirty-three</a><a href="#">thirty-four</a><a href="#">thirty-five</a><a href="#">thirty-six</a><a href="#">thirty-seven</a><a href="#">thirty-eight</a><a href="#">thirty-nine</a><a href="#">forty</a>
</div>

CSS

#scroller{
    margin: 10px;
    width: 300px;
    padding:10px;
    overflow: hidden;
    white-space: nowrap;
    border:1px solid red;
}
#scroller a{
    text-decoration:none;
    display:inline-block;
    border-right:1px solid red;
    margin:0px 0px 0px 0px;
    padding:2px;
}
#scroller a:hover{
    color:white;
    background:lightpink;
}

JavaScript

$(function(){
    scroller = $('#scroller');
    last=scroller.children().last();
    function recalculate(){
            W = scroller.innerWidth();
            left = scroller.offset().left;
            right = left + W;
            middle = Math.round(left + W/2);
            lastLeft=last.offset().left;
            lastW=last.outerWidth();
            totalW=lastLeft+lastW;
            factor=totalW/W;
            lastX=0;
    };
    $(window).resize(recalculate);
    
    function move(x){
            var delta = x-left;
            var toleft = delta/right*totalW-40; //(delta>0 ? factor : -factor);
            //console.log(ev.pageX, delta, toleft);
            scroller.scrollLeft(toleft);
    };
    function move2(x){
            var delta = x-middle;
            var toleft = scroller.scrollLeft() + (delta>0 ? factor : -factor);
            //console.log(ev.pageX, delta, toleft);
            scroller.scrollLeft(toleft);
    };
    function move3(x){
            var delta = x-lastX;
            var toleft = scroller.scrollLeft() + (delta>0 ? (factor) : (-factor));
            console.log(x,lastX, delta, toleft);
            scroller.scrollLeft(toleft);
            lastX=x;    
    };
    function move4(x){
            var delta = lastX-x;
            var toleft = scroller.scrollLeft() + delta;
            console.log(x,lastX, delta, toleft);
            scroller.scrollLeft(toleft);
            lastX=x;    
    };
    scroller.bind('touchstart',function(ev){
        ev.preventDefault();
        var touch = ev.originalEvent.touches [0] || ev.originalEvent.changedTouches[0] || ev.touches[0];
        lastX=touch.pageX;
    });
    scroller.bind('toaaauchend',function(ev){
        ev.preventDefault();
        var touch = ev.originalEvent.touches [0] || ev.originalEvent.changedTouches[0] || ev.touches[0];
        move3(touch.pageX);
    });
    
    scroller.bind('touchmove',function(ev){
        ev.preventDefault();
        var touch = ev.originalEvent.touches...