Scroll auf Hover, klicken Sie für Geschwindigkeit

Question

Ich versuche, meine Seite scrollen, wenn Sie auf ein div schweben. Dies ist, was ich

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

http://jsfiddle.net/3yJVF/

bisher bekam es sind jedoch zwei Dinge zu tun. Ich brauche es, um die Geschwindigkeit jedes Mal zu erhöhen, wenn Sie klicken, zu stoppen, wenn Sie nicht mehr schweben und die Geschwindigkeit auf die Standardwerte zurückzusetzen.

Ich versuche, so etwas zu erreichen:

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

Ich suchte und fand einige Leute reden Ereignisbindung und eine globale Variable Einstellung zu überprüfen, ob es zu scrollen. Aber wird die obige Funktion funktionieren? Ich lerne noch. Ich könnte völlig falsch liegen.

Answer 1

Sie waren ziemlich nah - hier ist meine Version (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); 
    }); 
}); 

Änderungen zu beachten:

• count über den Intervall/Bindungen definiert ist. Es ist nicht ganz "global" in dem Sinne, dass man es im Fenster sehen kann, aber es ist darauf beschränkt, in der onReady-Schließung zu leben.
• interval ist der zugewiesene Wert von setInterval - so können wir es von etwas zu tun, später mit clearInterval
• stoppen kann ich nicht mouseleave zuvor gesehen haben, aber mouseout sollte es tun.
• In jQuery können Sie Dinge miteinander verketten - so $('#hoverscroll').on(...).click(...).on(...).addClass(...).blah(...) sparen Sie die Zeit des Tippens jedes Selektors. Sehen Sie sich auch die Methode end() von jQuery an, wenn Sie die Verkettung planen.
• Ich ziehe $.fn.on anstelle der Kürzel wie .click() verwenden - es zeigt deutlich, dass Sie einen Event-Handler verwenden, sollten Sie in den zusätzlichen Buchstaben für on und fallen die überschüssigen Zeichen in Ihren $() Auswahlen zu werfen?

Answer 2

versuchen Ihre Geige folgenden Code vor:

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

}); 
}); 

diese Geige sehen: http://jsfiddle.net/3yJVF/5/

Answer 3

Sie sind nicht so weit weg von der Lösung. Sie müssen die interval oder timeout einer Variablen zuweisen und es zu löschen, wenn Sie das Element schweben aus:

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