Scorrere al passaggio del mouse, fare clic per la velocità

Question

Sto cercando di far scorrere la pagina quando si passa il mouse su un div. Questo è quello che ho ottenuto finora

$(document).ready(function() { 
    $("#hoverscroll").mouseover(function() { 
     var div = $('body'); 
     setInterval(function(){ 
      var pos = div.scrollTop(); 
      div.scrollTop(pos + 1); 
     }, 100) 
    }); 
}); 

http://jsfiddle.net/3yJVF/

Tuttavia, ci sono due cose da fare. Ne ho bisogno per aumentare la velocità ogni volta che si fa clic, fermarsi quando non si passa più con il mouse e ripristinare la velocità sui valori predefiniti.

io sto cercando di realizzare qualcosa di simile:

$(document).ready(function() { 
    $("#hoverscroll").mouseover(function() { 
     var div = $('body'); 

     setInterval(function(){ 
      var count = 1; 
      var pos = div.scrollTop(); 
      div.scrollTop(pos + count); 
     }, 100) 
    }); 

    $("#hoverscroll").click(function() { 
     if (count < 6) { 
      count = count+1; 
     } 
    }); 

    $("#hoverscroll").mouseleave(function() { 
     count = 0; 
    }); 
}); 

Ho cercato e trovato alcune persone parlare di legame evento e impostando una variabile globale per verificare se si tratta di scorrimento. Ma la funzione sopra funzionerà? Sto ancora imparando. Potrei essere completamente sbagliato.

Answer 1

Eri abbastanza vicino - ecco la mia versione (http://jsfiddle.net/Lcsb6/)

$(document).ready(function() { 
    var count; 
    var interval; 

    $("#hoverscroll").on('mouseover', function() { 
     var div = $('body'); 

     interval = setInterval(function(){ 
      count = count || 1; 
      var pos = div.scrollTop(); 
      div.scrollTop(pos + count); 
     }, 100); 
    }).click(function() { 
     count < 6 && count++; 
    }).on('mouseout', function() { 
     // Uncomment this line if you want to reset the speed on out 
     // count = 0; 
     clearInterval(interval); 
    }); 
}); 

Modifiche da notare:

• count è definito al di sopra dell'intervallo/associazioni. Non è del tutto "globale" nel senso che si può arrivare ad esso nella finestra, ma è relegato a vivere dentro la chiusura onReady.
• interval è il valore assegnato di setInterval - in questo modo siamo in grado di impedirgli di fare qualsiasi cosa in seguito con clearInterval
• non ho visto mouseleave prima, ma mouseout dovrebbe farlo.
• In jQuery, è possibile concatenare le cose - così $('#hoverscroll').on(...).click(...).on(...).addClass(...).blah(...) ti farà risparmiare tempo di digitare ogni volta il selettore. Inoltre, dai un'occhiata al metodo end() di jQuery se prevedi di utilizzare il concatenamento.
• io preferisco usare $.fn.on al posto delle abbreviazioni come .click() - denota chiaramente che si sta utilizzando un gestore di eventi, considerare gettando in pochi personaggi in più per on e rilasciando i caratteri in eccesso nel vostro $() selezioni?

Answer 2

prova seguente contro il tuo codice di violino:

$(document).ready(function() { 
    $("#hoverscroll").mouseover(function() { 
     var div = $('body'); 
     setInterval(function(){ 
     var pos = $("#hoverscroll").postion().top;  
     window.scrollTo(0, pos + 1) 
    },500); 

}); 
}); 

vedono questo violino: http://jsfiddle.net/3yJVF/5/

Answer 3

Tu non sei tanto lontano dalla soluzione. È necessario assegnare il interval o timeout a una variabile e cancellarlo quando si passa fuori l'elemento:

$(function() { 
    var speed = 1, 
     timer; 
    $("#hoverscroll").hover(function() { 
     var div = $('body'); 
     (function startscrolling(){ 
      timer = setTimeout(function() { 
       var pos = div.scrollTop(); 
       div.scrollTop(pos + speed); 
       startscrolling(); 
      }, 100); 
     })(); 
    }, 

    function() { 
     clearTimeout(timer); 
     speed = 1; 
    }) 
    .click(function(){ 
     if (speed < 6) speed++; 
    }); 

}); 

http://jsfiddle.net/3yJVF/2/