Как правильно прокрутить переполняющий элемент div в зависимости от положения мыши в его контейнере - PullRequest
Новая
       36

Как правильно прокрутить переполняющий элемент div в зависимости от положения мыши в его контейнере

1 голос
/ 03 октября 2011

Я работаю над небольшим плагином jQuery, который автоматически прокручивает набор переполняющихся элементов внутри контейнера div на основе позиции мыши в этом контейнере div.

См. Демонстрацию здесь

Идея в том, чтобы этот плагин был улучшением того, что я написал некоторое время назад.См. Автопрокрутку в нижнем левом углу здесь Старая проблема с этим заключалась в том, что она прыгает вокруг, когда вы наводите курсор мыши из любой точки, кроме нижней (перспектива javascript) контейнера div.работает нормально с моим плагином, но когда вы вводите курсор мыши сверху, он время от времени портится (быстро перемещайте мышь внутрь и наружу, и это произойдет наверняка), я думаю, это потому, что я получаю разные значения из моего события 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(pos<0){
                    pos = 0;
                }
                if(pos>totalScrollDistance){
                    pos = totalScrollDistance;

                }

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


        });

1 Ответ

0 голосов
/ 07 февраля 2012

Я решил эту проблему, в моих вычислениях произошла ошибка, но она работает так, как я описал выше.Вы можете увидеть это в действии здесь

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

...