l'événement de défilement de la fenêtre jquery ne fonctionne pas correctement avec overflow-x hidden

Question

J'ai utilisé ce code pour ajouter une animation à la barre de navigation.

    $(window).on("scroll", function () {
    if ($(this).scrollTop() > 20) {
        $('.top-menu .navbar').removeClass('remove-nav-move');
        $('.top-menu .navbar').addClass('nav-move');
    } else {
        $('.top-menu .navbar').removeClass('nav-move');
        $('.top-menu .navbar').addClass('remove-nav-move');
    }
});

puis j'ai ajouté quelques css

html , body  {
    overflow-x: hidden;
}

.full-width-bar {
    margin: 0 -9999rem;
    /* add back negative margin value */
    padding: 0.25rem 9999rem;
    background: rgba(0, 0, 0, 0.5);
}

et le overflow-x: hidden; sur le corps de la ruine le défilement de la fenêtre alors s'il vous plaît toute aide pour corriger cela ou toute autre façon de le faire et beaucoup de merci à l'avance

Answer 1

Je n'ai pas trouvé de solution à ce problème et j'ai donc supprimé la fonction overflow-x mais avant cela, j'ai essayé et la meilleure chose que j'ai trouvée est

  var up_wind = 0;

$(window).bind("mousewheel DOMMouseScroll wheel", function (event, delta) {
     console.log(delta);
    if (delta>= 0 && delta != "undefined") {
        if(up_wind != 0){
            up_wind--;
            console.log('Scroll up');
            console.log(up_wind);
        }
    }
    else if(delta != "undefined") {
     if(up_wind >= 0)
         up_wind++;

         console.log('Scroll down');
        console.log(up_wind);
    }

    if(up_wind > 1){
        $('.top-menu .navbar').removeClass('remove-nav-move');
        $('.top-menu .navbar').addClass('nav-move');
    } else {
        $('.top-menu .navbar').removeClass('nav-move');
        $('.top-menu .navbar').addClass('remove-nav-move');
    }
});

J'espère que cela vous aidera.