De défilement sur le vol stationnaire, cliquez sur pour la vitesse

Je suis en train de faire ma page de défilement lorsque vous passez la souris sur un div. C'est ce que j'ai obtenu jusqu'à présent

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

http://jsfiddle.net/3yJVF/

Cependant, il y a deux choses à faire. J'en ai besoin pour augmenter la vitesse à chaque fois que vous cliquez sur, arrêtez-vous quand vous n'êtes plus planant et réinitialiser la vitesse par défaut.

Je suis en train de réaliser quelque chose comme ceci:

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

J'ai cherché et trouvé des gens parler de la liaison de l'événement et la définition d'une variable globale pour vérifier si il est de défilement. Mais la fonction ci-dessus travail? Je suis toujours en apprentissage. Je suis peut-être complètement faux.

OriginalL'auteur Ming | 2013-08-12

  1. 8

    Vous étiez très proche - voici ma 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);
    });
});

    Changements à noter:

    • count est définie au-dessus de l'intervalle/fixations. Ce n'est pas tout à fait "global" dans le sens que vous pouvez obtenir dans la fenêtre, mais il est relégué à la vie à l'intérieur de la onReady fermeture.
    • interval est la valeur assignée à setInterval - de cette façon, nous pouvons nous arrêter de faire quelque chose plus tard avec clearInterval
    • Je n'ai pas vu mouseleave avant, mais mouseout devrait le faire.
    • En jQuery, vous pouvez lier les choses ensemble $('#hoverscroll').on(...).click(...).on(...).addClass(...).blah(...) vous permet d'économiser le temps de taper le sélecteur à chaque fois. Aussi, jetez un oeil à jQuery end() méthode si vous prévoyez sur l'utilisation de l'enchaînement.
    • Je préfère utiliser $.fn.on au lieu de les abréviations comme .click() - il dénote clairement que vous êtes en utilisant un gestionnaire d'événement, pensez à jeter dans le supplément de quelques caractères pour on et l'abandon de l'excès de caractères dans votre $() sélections?
    Les deux solution a fonctionné. Depuis que je suis nouveau à cela, je ne peux pas dire lequel est le plus efficace. Mais merci de prendre de votre temps pour expliquer le code!
    L'efficacité dans ce cas est négligeable - après avoir dit cela, vous devez travailler à travers toutes les solutions de travail et de comprendre comment ils fonctionnent et d'appliquer les techniques présentées de façon appropriée lorsque vous en avez besoin.

    OriginalL'auteur phatskat

  2. 2

    Vous n'en êtes pas loin de la solution. Vous devez attribuer le interval ou timeout à une variable et de la désactiver lorsque vous passez la souris hors de l'élément: 

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

    OriginalL'auteur kayen

  3. 0

    essayez de la suivre à l'encontre de votre violon code:

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

 });
});

    voir ce violon: http://jsfiddle.net/3yJVF/5/

    OriginalL'auteur maverickosama92

  4. 0

    J'ai mis à jour le code de la accepté question, car il ne fonctionne plus.

    Voir: 

    $(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() {
        //reset the speed on out
        count = 0;
        clearInterval(interval);
    });
})
;

    http://jsfiddle.net/wzvowvzn

    OriginalL'auteur daniol