Bug menu responsive scroll

Par abourtnik, il y a 8 ans

Les bases HTML/CSS

Hello a tous, j'ai un souci au niveau du scroll avec mon menu responsive, le scroll est bien détecté par jQuery en version non-responsive mais des que je passe en responsive il n'est plus détecté.

J'ai mis un console.log()du scroll pour tester.

Je pense que ça doit venir d'un overflow, mais j'ai tourné le code dans tout les sens et je n'arrive pas a trouver la solution.

J'ai mis le site en ligne pour que vous puisiez voir le code : http://test.antonbourtnik.fr/ .

Merci pour votre aide.

4 réponses

TokaLazy, il y a 8 ans

Hello

Première petite clarification: "reponsive" ne veut pas dire que tu es sur mobile. C'est juste un terme pour dire que ton site s'adapte a plusieurs taille d'ecran. Il faudrait plutôt dire "en non-desktop" ^^

Deuxième chose, avoir les sources peut etre fort pratique.

Sinon pour ton problème, essaye ça pour voir :

$(window).on("scroll touchmove", function() { var scroll = $(window).scrollTop(); console.log(scroll); $("#scroll-position").text(scroll); });

Et si tu veux être moderne, voici la version es6 :

$(window).on("scroll touchmove", () => { const scroll = $(window).scrollTop(); console.log(scroll); $("#scroll-position").text(scroll); });

Dans l'absolue, je ne pense pas qu'un event sur le touchmove soit utile dans ton cas. De plus je te conseil de mettre un throttle, sinon ça peut faire ralentir le navigateur (bon certes, par sur ce cas precis mais ce serait un plus). Voila un tuto sur le site qui en parle https://www.grafikart.fr/tutoriels/javascript/debounce-throttle-642

abourtnik, il y a 8 ans

Salut TokaLazy,

Merci pour ta reponse.

Alors j'ai essayé de rajouter touch move il est bien detecté lorque je scroll mais ca m'affiche 0 au niveau de la postion du scroll.

Mon but final est de faire fonctionner le bouton scroll to top qui fonctionne pas en "non-desktop".

Voici le code Jquery :

(function($){ $('#header__icon').click(function(e){ e.preventDefault(); $('body').toggleClass('with--sidebar'); }); $('#site-cache').click(function(e){ $('body').removeClass('with--sidebar'); }) $(window).on('scroll touchmove', function(e) { var scroll = $(window).scrollTop(); console.log(scroll); $('#scroll-position').text(scroll); }); //Click event to scroll to top $('.scrollToTop').click(function(){ $('html, body').animate({scrollTop : 0},800); return false; }); })(jQuery);
TokaLazy, il y a 8 ans

Je me demande si l'écoute de l'event touchmove n'interfere pas

D'ailleurs, pourquoi tu as besoin de ça? Un simple listener sur le scroll ne suffi pas ?