如何根据容器内的鼠标位置正确滚动溢出的div [英] How to properly scroll an overflowing div based on mouse position within its container

问题描述

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

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.

查看此处的演示

这个插件的想法是改进我刚才写的东西。请参阅左下角中的自动滚动导航。这个问题的一个原因是，当您从任何地方进入鼠标时，它会跳转但是容器div的底部（javascript透视图）。

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.

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

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));    


        });

推荐答案

我解决了这个问题，我的错误计算，但按照我上面描述的方式工作。
你可以在这里看到它的实际效果

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/

这篇关于如何根据容器内的鼠标位置正确滚动溢出的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！