jquery molette de la souris

Je veux faire défiler le contenu d'un div avec la roulette de la souris plugin jquery. J'ai cela mais sa ne fonctionne pas. Toutes les pensées?

$(function() {
$('#contentBox').bind('mousewheel', function(event, delta) {
   if (delta > 0) {
        $('#contentBox').css('top', parseInt($('#contentBox').css('top'))+40);
    } else {
        $('#contentBox').css('top', parseInt($('#contentBox').css('top'))-40);
    }
  return false;
}); 
});
La vraie réponse: stackoverflow.com/questions/8886281/...

OriginalL'auteur user520300 | 2011-05-15

  1. 7

    Juste une supposition : l'ajout d' + 'px' à la valeur CSS arranger les choses? En fait, ce n' "médias"?

    Mise à JOUR

    OK, j'ai eu la chance de tester votre code et ça a l'air bon, en supposant que vous avez mis le CSS correctement. Avez-vous fait d'attribuer une valeur pour top sur #contentBox déjà? Sans une valeur existante, parseInt($('#contentBox').css('top')) sera de retour NaN. Voici le code que j'ai utilisé:

    $(function() {
    $('#contentBox').bind('mousewheel', function(event, delta) {

        $('#contentBox').css('top', parseInt($('#contentBox').css('top')) + (delta > 0 ? 40 : -40));

        return false;
    });
});

#contentBox { height: 4em; background-color: #eee; border: 1px solid #ccc; position: absolute; top: 100px; width: 200px; }

<div id="contentBox"></div>

    Notez que j'ai utilisé l'opérateur ternaire simplifier/réduire un peu le code, mais c'est juste pour garder la taille de cette réponse un peu, et est entièrement facultative. Aussi, je l'ai juste utilisé quelques test CSS là pour voir ce que je fais; je suis sûr que le vôtre est différent!

    désolé de voir modifier ci-dessus. j'ai été l'appel de #contentBox comme des médias à un point, mais qui n'a pas fonctionné, soit
    l'ajout de l' + 'px' na pas de travailler
    Je sais que c'est évident, mais une console.journal (le) de delta et de votre .css.('top', ...) va vous dire où est le problème.
    Aussi, est que le code réel, exactement? On dirait que vous êtes absent de $ entre les deux parenthèses après parseint
    code mis à jour... la div ne sera toujours pas de défilement avec la molette de la souris

    OriginalL'auteur Bobby Jack

  2. 15
    $('#contentBox').bind('mousewheel DOMMouseScroll', function(event) {
  event.preventDefault();
  var delta = event.wheelDelta || -event.detail;
  $(this).css({'top': $(this).position().top + (delta > 0 ? '+=40' : '-=40')});
});

    http://www.adomas.org/javascript-mouse-wheel/

    Pourquoi dans mon navigateur Firefox et Chrome sous Ubuntu besoin de les utiliser pour la faire fonctionner 🙁 var delta = e.wheelDelta || -e.detail || e.originalEvent.wheelDelta || -e.originalEvent.detail

    OriginalL'auteur ruvan

  3. 3

    Si vous utilisez jQuery 1.6, vous pouvez écrire:

    $('#contentBox').css('top','+=40');

    et de l'oublier.

    Évidemment, vous avez encore besoin de CSS pour bien déclarer #contentBox être en positionnement absolu et tout le reste.

    OriginalL'auteur Simone Gianni