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

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

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

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

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

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

  • используйте a if/else, чтобы проверить, находится ли он в верхнем регистре или внизу, прокрутите вверх, если e.pageY показывает, что он находится сверху, вниз, если e.page & находится внизу, а затем вызывает событие $('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);
      });

ОТВЕТЫ

Ответ 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()

Ответ 2

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

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

Ответ 3

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

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

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

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

  • Также на сайте в # 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

Ответ 4

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

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