How to properly scroll an overflowing div based on mouse position within its container

Question

I am working on a small jQuery plugin that autoscrolls through a set of overflowing elements within a container div based on the mouse position within that container div.

See the Demo Here

The idea is for this plugin to be an improvement of something I wrote a while ago. See the autoscrolling navigation in the lower left here The old problem with this was that it jumps around when you mouseenter from anywhere but the bottom(javascript perspective) of the container div.

Now everything is working fine with my plugin but when you mouseenter from the top it screws up from time to time(move your mouse in and out fast and it will happen for sure), I think this is because I am getting different values from my mouseenter event and my mousemove event which are both used to calculate how to scroll the inner elements. Here is the function, the rest of the source is pretty small and decently commented.

projList.mousemove(function(e){

            //keep it from freaking out when we mouseenter from Top of div
            if(enterMouseY > divHeight){
                enterMouseY = divHeight;
            }

            mouseY = e.pageY-projList.offset().top;

            //ok that didnt work... try to keep it from freaking out when we mouseenter from Top of div
            if (mouseY > divHeight){
                mouseY = divHeight;
            }

            //distnace from top of container div to where our mouse Entered
            var distToTop = divHeight - enterMouseY;

            //here is the calculation, I parameterize the mouseY pos as a value between 0-1
            //0 being where we entered and 1 being the top or bottom of the div
            //then multiply that by how much we have to scroll to get to the end of the list

            //are we moving up or down
            if(mouseY>enterMouseY){
                //if up calculate based on Top
                var dist  =totalScrollDistance * ((mouseY-enterMouseY-projList.offset().top)/(distToTop));
            }else if(mouseY<enterMouseY){
                //if up calculate based on Bottom 
                var dist  =totalScrollDistance * ((mouseY-enterMouseY-projList.offset().top)/(enterMouseY));
            }else if(mouseY = enterMouseY){
                var dist = 0;
            }


                //set the position of the list offsetting wherever we left it
                pos =  dist+lastPos;
                //scroll to that position
                projList.scrollTop(pos);    

                //are we trying to scroll past the scrollable amount
                if(pos<0){
                    pos = 0;
                }
                if(pos>totalScrollDistance){
                    pos = totalScrollDistance;

                }

        $('#div1').text("mouseY: "+ mouseY +" enterMouseY: "+ enterMouseY +" distance:"+ dist.toFixed(1) + " pos:"+ pos.toFixed(1));    


        });

Answer 1

I solved this problem, there was an error in my calculations, but works how I described above. You can see it in action here

http://web.archive.org/web/20130529212243/http://www.robincwillis.com/AutoScroll/