Come utilizzare JQuery/Javascript per scorrere verso il basso una pagina quando il cursore si trova sul bordo superiore o inferiore dello schermo?

Question

Semplice, Vorrei solo che sia così quando un utente sta trascinando un oggetto e che raggiungano il fondo o la parte superiore della finestra (10px o giù di lì), la pagina (circa 3000px lungo) Scrolls delicatamente verso il basso o verso l'alto, fino a quando non spostano il cursore (e quindi l'elemento trascinato) fuori regione.

Un elemento è un tag li che utilizza jquery per rendere trascinabili gli elementi dell'elenco. Per essere specifici:

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

Attualmente uso window.scrollBy (x = 0, y = 3) per scorrere la pagina e avere le variabili di:

1. e.pageY ... fornisce assoluti Y-coordinate del cursore sulla pagina (non relativa a schermo)
2. $ .scrollTop() ... fornisce offse t dalla parte superiore della pagina (quando la barra di scorrimento è completamente alzata, è 0)
3. $ .height() ... fornisce l'altezza dell'area visualizzabile nel browser/viewport dell'utente
4. body.offsetHeight .. altezza dell'intera pagina

Come posso ottenere questo e quale evento lo ospita meglio (attualmente è il mouseover)? Le mie idee:

1. uso un un if/else per verificare se è in alto o in basso regione, scorrere verso l'alto se e.pageY sta dimostrando che è in alto, verso il basso se e.page & è in fondo e quindi chiama $ ('li'). mouseover() per iterare attraverso ...
   2. Utilizzare un ciclo do while ... questo ha funzionato moderatamente bene in realtà, ma è difficile smettere di scorrere fino a lontano. Ma io non sono sicuro di come controllare le iterazioni ....

Il mio ultimo tentativo:

  ('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

funziona abbastanza bene ora, l'utente ha solo bisogno di "jiggle" il mouse quando trascinare gli elementi a volte per mantenere lo scorrimento, ma per lo scorrimento solo con la posizione del mouse la sua piuttosto solido . Ecco quello che ho finalmente finito per usare:

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

Questo non funzionerà come l'evento solo incendi mentre siete mouse è oltre il li.

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

Devi essere in grado di dire la posizione del mouse rispetto al viewport quando un elemento viene trascinato. Quando gli utenti iniziano a trascinare un oggetto, associare un evento "mousemove" al corpo e quindi controllare la posizione del mouse e scorrere quando necessario.

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

Non dimenticare di rimuovere l'evento quando l'utente interrompe il trascinamento.

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

Answer 3

ricevo una newsletter settimanale (e-mail) da CodeProject, e aveva un po 'di roba che sembra certamente come si possa risolvere il mio problema ...speriamo che questo può aiutare gli altri:

1. http://johnpolacek.github.com/scrollorama/ - JQuery basa e anima il rotolo

2. https://github.com/IanLunn/jQuery-Parallax - basato JQuery, simile al precedente

3. http: // remysharp. it/2009/01/26/elemento-in-vista-evento-plugin/- JQuery, rileva se un elemento è attualmente in vista dell'utente (super utile per questo problema!)

4. Anche il sito in # 2 ha avuto un certo codice interessante:

   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

Questo potrebbe non essere esattamente quello che vuoi, ma potrebbe aiutare. Scorrerà automaticamente quando il mouse si trova sul "bordo dello schermo" (una regione definita dall'utente). Supponiamo di avere una barra larga 40 px sulla destra dello schermo, se il mouse raggiunge il primo 1px, inizierà a scorrere. Ogni px ci passi dentro, la velocità aumenterà. Ha anche una bella animazione di andamento.

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