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

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

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

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

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

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

  1. использовать если/еще, чтобы проверить, если он находится в верхней области или внизу, прокрутка вверх, если е.pageY показывает это в топ, Если е.страницы и в нижнем, и затем вызов $('li').событие mouseover () для итерации...
    1. используйте цикл 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);
      });
14
draggable javascript jquery scroll viewport

4 ответов

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

 $("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()
3

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

('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
});
0

Я получаю еженедельный бюллетень (электронную почту) от 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
0

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

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

0