Как использовать JQuery / Javascript, чтобы прокрутить страницу вниз, когда курсор находится в верхней или нижней части экрана?

Question

Простой, Мне просто хотелось бы, чтобы, когда пользователь перетаскивает элемент, и он достигает самого нижнего или верхнего края области просмотра (10 пикселей или около того) , страница (длиной около 3000 пикселей) плавно прокручивает вниз или вверх, пока не переместит курсор (и, следовательно, перетаскиваемый элемент) из области .

Элементэто тег li, который использует jquery для перетаскивания элементов списка.Чтобы быть конкретным:

• .. / jquery-ui-1.8.14.custom.min.js
• http://code.jquery.com/jquery-1.6.2.min.js

Я сейчас используюwindow.scrollBy (x = 0, y = 3) для прокрутки страницы и переменных:

1. e.pageY ... предоставляет абсолютные Y-координаты курсора на странице (не относительноscreen)
2. $. scrollTop () ... обеспечивает смещение от верхней части страницы (когда полоса прокрутки полностью вверх, это 0)
3. $. height () ...предоставляет высоту видимой области в браузере пользователя / окне просмотра
4. body.offsetHeight ... высота всей страницы

Как мне этого добиться и какое событие лучше всего подходит для этого (в настоящее время его при наведении курсора)?Мои идеи:

1. используйте if / else, чтобы проверить, находится ли он в верхней области или внизу, прокрутите вверх, если e.pageY показывает, что он сверху, вниз, если e.page & находится вbottom, а затем вызывая событие $ ('li'). mouseover () для итерации по ...
2. Используйте цикл do while ... на самом деле это работало умеренно хорошо, но трудно остановить прокрутку на дальнюю позицию.Но я не уверен, как управлять итерациями ....

Моя последняя попытка:

          ('li').mouseover(function(e) {

            totalHeight = document.body.offsetHeight;
            cursor.y = e.pageY;
            var papaWindow = window;
            var $pxFromTop = $(papaWindow).scrollTop();
            var $userScreenHeight = $(papaWindow).height();
            var iterate = 0;

            do {
                papaWindow.scrollBy(0, 2);
                iterate++;
                console.log(cursor.y, $pxFromTop, $userScreenHeight);
            }

            while (iterate < 20);
      });

Answer 1

Работает довольно хорошо сейчас, пользователю просто нужно «покачивать» мышь при перетаскивании элементов, чтобы продолжать прокручивать, но для прокрутки только с положением мыши это довольно твердо. Вот что я наконец-то использовал:

 $("li").mouseover(function(e) {

  e = e || window.event; var cursor = { y: 0 }; cursor.y = e.pageY; //Cursor YPos
  var papaWindow = parent.window;
  var $pxFromTop = $(papaWindow).scrollTop();
  var $userScreenHeight = $(papaWindow).height();

  if (cursor.y > (($userScreenHeight + $pxFromTop) / 1.25)) {

         if ($pxFromTop < ($userScreenHeight * 3.2)) {

                   papaWindow.scrollBy(0, ($userScreenHeight / 30));
             }
        }
  else if (cursor.y < (($userScreenHeight + $pxFromTop) * .75)) {

        papaWindow.scrollBy(0, -($userScreenHeight / 30));

        }

   }); //End mouseover()

Answer 2

Это может быть не совсем то, что вы хотите, но это может помочь. Он будет автоматически прокручиваться, когда мышь находится над «границей экрана» (пользовательская область). Скажем, у вас есть полоса шириной 40px в правой части экрана, если мышь достигнет 1px, она начнет прокручиваться. С каждым пикселем, в который вы перемещаетесь, скорость будет увеличиваться. У него даже есть хорошая анимация замедления.

http://www.smoothdivscroll.com/v1-2.htm

Answer 3

Я получаю еженедельную рассылку (электронное письмо) от CodeProject, и в нем есть кое-что, что, похоже, решит мою проблему ... надеюсь, это поможет другим:

1. http://johnpolacek.github.com/scrollorama/ - на основе JQuery и анимирует свиток

2. https://github.com/IanLunn/jQuery-Parallax - на основе JQuery, аналогично указанному выше

3. http: // remysharp. com / 2009/01/26 / element-in-view-event-plugin / - JQuery, определяет, находится ли элемент в данный момент в поле зрения пользователя (очень полезно для этой проблемы!)

4. Также на сайте №2 был интересный код:

   var windowHeight = $window.height();
   var navHeight = $('#nav').height() / 2;
   var windowCenter = (windowHeight / 2);
   var newtop = windowCenter - navHeight;
   //ToDo: Find a way to use these vars and my original ones to determine scroll regions
   

Answer 4

Это не сработает, поскольку событие срабатывает только тогда, когда мышь находится над литом.

('li').mouseover(function(e) { });

Вы должны иметь возможность определять положение мыши относительно области просмотра при перетаскивании элемента. Когда пользователи начинают перетаскивать элемент, присоедините событие «mousemove» к телу, а затем проверьте положение мыши и, при необходимости, прокрутите.

$("body").on("mousemove", function(event) {
// Check mouse position - scroll if near bottom or top
});

Не забудьте удалить свое событие, когда пользователь прекратит перетаскивание.

$("body").off("mousemove", function(event) {
// Check mouse position - scroll if near bottom or top
});