如何根据容器内的鼠标位置正确滚动溢出的div

我正在研究一个小的jQuery插件，它根据容器div中的鼠标位置自动滚动容器div中的一组溢出元素。

在这里看演示

这个插件的想法是改进我刚才写的东西。 请参阅左下角的自动滚动导航这里的老问题是，当您从容器div的底部（javascript透视图）以外的任何位置进行鼠标导入时它会跳转。

现在一切都运行良好我的插件但是当你从顶部进入mouseenter时它会不时地拧紧（快速移动你的鼠标进入和移出它肯定会发生），我想这是因为我从我得到了不同的价值mouseenter事件和我的mousemove事件，它们都用于计算如何滚动内部元素。 这是函数，其余的源代码非常小而且评论很好。

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(postotalScrollDistance){ pos = totalScrollDistance; } $('#div1').text("mouseY: "+ mouseY +" enterMouseY: "+ enterMouseY +" distance:"+ dist.toFixed(1) + " pos:"+ pos.toFixed(1)); }); 

Answer 1

我解决了这个问题，我的计算中出现了错误，但是我的工作原理如上所述。 你可以在这里看到它

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