Przewiń po najechaniu kursorem myszy, kliknij, aby przyspieszyć.

Question

Próbuję przewinąć stronę po najechaniu na element div. To, co mam tak daleko

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

http://jsfiddle.net/3yJVF/

Jednakże istnieją dwie rzeczy do zrobienia. Potrzebuję go, aby zwiększyć prędkość za każdym razem, gdy klikniesz, zatrzymaj się, gdy przestaniesz się unosić i zresetuj prędkość do wartości domyślnej.

Próbuję osiągnąć coś takiego:

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

I przeszukiwane i znaleźć kilka osób mówi o wiążących zdarzenie i ustawienie zmiennej globalnej, by sprawdzić, czy to przewijanie. Ale czy powyższa funkcja zadziała? Jestem w trakcie nauki. Mogę być całkowicie błędny.

Answer 1

Byłaś całkiem blisko - oto moja wersja (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); 
    }); 
}); 

Zmiany Uwaga:

• count jest zdefiniowany powyżej Interval/wiązaniami. Nie jest to "globalne" w tym sensie, że można się do niego dostać w oknie, ale jest ono relegowane do życia w zamkniętym zamknięciu.
• interval jest przypisana wartość setInterval - w ten sposób możemy powstrzymać go od robienia czegokolwiek później clearInterval
• Nie widziałem mouseleave wcześniej, ale mouseout powinno wystarczyć.
• W jQuery możesz łączyć ze sobą różne rzeczy - dzięki czemu $('#hoverscroll').on(...).click(...).on(...).addClass(...).blah(...) zaoszczędzi ci czasu na wpisanie selektora za każdym razem. Spójrz również na metodę jQuery pod numer end(), jeśli planujesz używać łączenia.
• wolę używać $.fn.on zamiast shorthands jak .click() - jasno wskazuje, że używasz programu obsługi zdarzeń, należy rozważyć rzucać w kilka dodatkowych znaków dla on i upuszczając nadmiar znaków w swoich $() wyborów?

Answer 2

spróbować następujących przeciwko kodzie skrzypce:

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

}); 
}); 

zobaczyć ten skrzypce: http://jsfiddle.net/3yJVF/5/

Answer 3

że nie jesteś daleko od rozwiązania. Trzeba przypisać interval lub timeout do zmiennej i wyczyścić go po najechaniu wyłączyć element:

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