Partage
  • Partager sur Facebook
  • Partager sur Twitter

JQuery Adaptation du script à l'événement

plugin: jquery.mousewheel.js

    15 août 2018 à 16:26:27

    Bonjour,

    Voici mon problème:

    J'ai actuellement un site ou les pages sont développé en vertical (donc un scroll de haut en bas) et j'ai mon menu de navigation qui lui est développé en horizontal (donc un scroll de gauche en droite), et j'essaye d’alterner le scroll de horizontale à verticale et inversement lorsque mon menu est ouvert (menu qui se superpose au page principale).

    Donc pour sa j’utilise le plugin jquery.mousewheel.js pour permettre le scroll horizontale ce qui fonctionne très bien sauf que le problème est d'alterner entre les deux !

    Je pensais faire un simple condition en testant si le menu est ouvert alors j'appelle ma fonction qui appelle le plugin.

    $(document).ready(function() {
        if ($('#menu').hasClass('scrollLeft')) {
            $('html, body, *').mousewheel(function(e, delta) {
                this.scrollLeft -= (delta * 1);
                e.preventDefault();
            });
        };
    });

    Avec 'scrollLeft' un class qui apparaît lorsque le menu est ouvert grâce a JQuery.

    $(document).ready(function () {
        $('#menu').hide();
        $('.menuOpen').click(function () {
            $('#menu').show();
            $('#menu').addClass('scrollLeft');
            $('body, html').css('overflow-x', 'scroll');
        });
        $('.menuClose').click(function () {
            $('#menu').removeClass('scrollLeft');
            $('body, html').css('overflow-x', 'hidden');
        });
    });

    Sauf que cette condition est passe en revue uniquement au chargement de la page.

    C'est à dire que dans ce cas le scroll est bloqué en scroll verticale (par ce qu'il ne détecte pas cette class au chargement) et si on me la class 'scrollLeft' par défaut sur le menu est que on la supprime au chargement le scroll est bloqué en scroll horizontale.

    $(document).ready(function() {
        $('#menu').removeClass('scrollLeft');
        if ($('#menuCloseA').hasClass('scrollLeft')) {
            $('html, body, *').mousewheel(function(e, delta) {
                this.scrollLeft -= (delta * 1);
                e.preventDefault();
            });
        };
    });

    Une idée de comment gérer ce problème ?

    Via un plugin qui gère ces cas particulier peut être ?

    Merci de vos propositions.

    • Partager sur Facebook
    • Partager sur Twitter

    JQuery Adaptation du script à l'événement

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
    • Editeur
    • Markdown