Scrollen beim Überfahren, klicken für Geschwindigkeit

Question

Ich versuche, meine Seite so zu machen, dass sie scrollt, wenn man auf ein div hovert. Das ist, was ich bisher habe

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

http://jsfiddle.net/3yJVF/

Es fehlen jedoch noch zwei Dinge. Ich möchte, dass die Geschwindigkeit jedes Mal erhöht wird, wenn man klickt, dass das Scrollen aufhört, wenn man nicht mehr hovert, und die Geschwindigkeit auf den Standardwert zurückgesetzt wird.

Ich versuche, etwas wie das hier 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 habe gesucht und gefunden, dass einige Leute über das Binden von Events und das Setzen einer globalen Variable sprechen, um zu überprüfen, ob es scrollt. Aber wird die oben genannte Funktion funktionieren? Ich lerne noch. Ich könnte völlig falsch liegen.

Answer 1

Du warst ziemlich nah dran - 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);
    });
});

Zu beachtende Änderungen:

• count wird über dem Intervall/Bindings definiert. Es ist nicht ganz "global" im Sinne, dass man darauf im Fenster zugreifen kann, aber es ist auf den onReady-Block beschränkt.
• interval ist der zugewiesene Wert von setInterval - auf diese Weise können wir es später mit clearInterval stoppen.
• Ich habe mouseleave noch nicht gesehen, aber mouseout sollte es tun.
• In jQuery können Dinge verkettet werden - also $('#hoverscroll').on(...).click(...).on(...).addClass(...).blah(...) wird Ihnen Zeit sparen, den Selektor jedes Mal einzugeben. Schauen Sie sich auch die end()-Methode von jQuery an, wenn Sie die Verkettung verwenden möchten.
• Ich ziehe es vor, $.fn.on anstelle der Kurzformen wie .click() zu verwenden - es gibt deutlich an, dass Sie einen Ereignisbehandler verwenden. Überlegen Sie, die zusätzlichen Zeichen für on zu verwenden und die überschüssigen Zeichen in Ihren $()-Selektionen zu reduzieren?

Answer 2

Du bist nicht weit von der Lösung entfernt. Du musst das interval oder timeout einer Variablen zuweisen und es löschen, wenn du das Element verlässt:

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

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

});

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

Answer 3

Versuchen Sie folgendes gegen Ihren Fiddle-Code:

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

 });
});

Sehen Sie sich dieses Fiddle an: http://jsfiddle.net/3yJVF/5/

Answer 4

Ich habe den Code der akzeptierten Frage aktualisiert, weil er nicht mehr funktioniert.

Siehe:

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

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

        interval = setInterval(function(){
            count = count || 1;
            var pos = div.scrollTop();
            div.scrollTop(pos + count);
        }, 100);
    }).click(function() {
        if (count < 6) {
             count = count+1;
        }
    }).on('mouseout', function() {
        // Geschwindigkeit zurücksetzen
        count = 0;
        clearInterval(interval);
    });
})
;

http://jsfiddle.net/wzvowvzn