Deux événements scroll qui ne s'aiment pas.

LeoLB
Javascript

Bonjour à tous,
J'ai réalisé une présentation portant sur la précision de la géolocalisation => les limites du GPS. Cependant, je souhaite ajouter une petite fonctionnalité en plus : dès que l'on descend un petit peu, mon jquery détecte ceci et me fait descendre à la diapo suivante. Cependant, après ajout de cette fonctionnalité, lorsque je clique ici contrairement à ici sans cette fonctionnalité. En effet, j'ai deux événements qui se confrontent.

J'utilise le plugin JQuery HISTORY pour détecter les changements de hash. Voici mon bout de code en question.

// Ce bout de code détecte le change de hash et fait scroller la page jusqu'à arriver à la diapo !
$.History.bind(function(state){
   action=state.split('/');
   if( action[1] != ''){
     var reg = /^[0-9]{1,2}$/; 
     var test = reg.test(action[1]);
     if(test == true){
    $("html,body").animate({ scrollTop: height_scroll * (action[1] - 1)});
     }
   }
)};

Et le dernier bout de code qui gâche tout ! 

$(window).scroll(function () {
                if ($(this).scrollTop() > height_scroll *0.6 && $(this).scrollTop() < height_scroll *1) {
                     window.location.hash = "/2";
                }   

                if ($(this).scrollTop() > height_scroll *1.6 && $(this).scrollTop() < height_scroll *2) {
                     window.location.hash = "/3";
                }   

                if ($(this).scrollTop() > height_scroll *2.6 && $(this).scrollTop() < height_scroll *3) {
                     window.location.hash = "/4";
                }   

                if ($(this).scrollTop() > height_scroll *3.6 && $(this).scrollTop() < height_scroll *4) {
                     window.location.hash = "/5";
                }   

                if ($(this).scrollTop() > height_scroll *4.6 && $(this).scrollTop() < height_scroll *5) {
                     window.location.hash = "/6";
                }   

                if ($(this).scrollTop() > height_scroll *5.6 && $(this).scrollTop() < height_scroll *6) {
                     window.location.hash = "/7";
                }   

                if ($(this).scrollTop() > height_scroll *6.6 && $(this).scrollTop() < height_scroll *7) {
                     window.location.hash = "/8";
                }   

                if ($(this).scrollTop() > height_scroll *7.6 && $(this).scrollTop() < height_scroll *8) {
                     window.location.hash = "/9";
                }       

                if ($(this).scrollTop() > height_scroll *8.6 && $(this).scrollTop() < height_scroll *9) {
                     window.location.hash = "/10";
                }   

                if ($(this).scrollTop() > height_scroll *9.6 && $(this).scrollTop() < height_scroll *10) {
                     window.location.hash = "/11";
                }   

                if ($(this).scrollTop() > height_scroll *10.6 && $(this).scrollTop() < height_scroll *11) {
                     window.location.hash = "/12";
                }   

                if ($(this).scrollTop() > height_scroll *11.6 && $(this).scrollTop() < height_scroll *12) {
                     window.location.hash = "/13";
                }           
            });

En espérant que vous allez trouvez une solution pour mon problème.

Léo

2 réponses

Shadow
Réponse acceptée

Salut,

Sans tout comprendre de ton code :P je te dirais bien de tenter la fonction stopPropagation pour, comme son nom l'indique, stopper la propagation d'un évènement d'un élément parent à son enfant.

$(window).scroll(function(evt) {
    evt.stopPropagation();
});

En même temps la (bonne) gestion des évènements (surtout quand il y en a beaucoup :)) avec jQuery est une des choses les plus compliquées.

En espérant que cela t'aide ;)

Shadow

LeoLB
Auteur

Merci beaucoup Shadow, je ne connaisssais pas du tout cette fonction ... je vais l'essayer !