web-dev-qa-db-fra.com

Défilement horizontal avec molette de la souris sur une liste horizontale

Je tente un défilement horizontal avec la molette de la souris, mais cela ne semble pas fonctionner.

Voici mon Fiddle

Ma classe principale .selector est celle avec la variable overflow à défilement

C'est JS j'essaye d'initialiser le parchemin avec 

 $('.selector').mousewheel(function(e, delta) {
    this.scrollLeft -= (delta * 40);
    e.preventDefault();
});

Voici l'exemple que j'utilise pour le défilement horizontal https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

Merci d'avance pour votre aide!

EDIT: Merci à tous, j'ai oublié jQuery dans le Fiddle ouais désolé, mais lorsque je testais sur localhost, j'utilisais jQuery 1.11.1, alors c'était peut-être le cas. Acclamations gars

javascriptjqueryhtmlcssscroll
5
Sanction

Vous venez d'oublier d'ajouter JQuery à votre code HTML

http://jsfiddle.net/902tjbzz/

jquery.js: http://code.jquery.com/jquery-2.1.4.min.js

6
Aelios

Essayez this :

$('.selector').mousewheel(function(e, delta) {
    $(this).scrollLeft(this.scrollLeft + (-delta * 40));
    e.preventDefault();
});

De plus, vous n'avez pas inclus jQuery dans votre violon.

EDIT

En fait, le seul problème est que vous n’avez pas inclus jQuery, votre code initial fonctionne bien.

5
Arg0n

Première chose: dans votre jubé, vous oubliez d’inclure jquery.

La deuxième chose: j'ai changé $('.selector').mousewheel(function(e, delta) { en $('.selector').on("mousewheel", function(e, delta) { et alors seulement je pouvais voir que cet événement était déclenché.

Vérifiez également la logique de mise à jour de votre propriété scrollLeft. N'oubliez pas la direction (à gauche, à droite), donc dans certains cas, vous devriez ajouter de la valeur au lieu de la soustraire

1
Andrew