jquery mousewheel

Question

Quiero desplazar el contenido de un div con el mouse -heel jquery plugin. Tengo esto pero no está funcionando. ¿Alguna idea?

$(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; 
}); 
}); 

Answer 1

Just a guess: does adding + 'px' to the CSS value fix things? En realidad, ¿a qué se refieren los "medios"?

ACTUALIZACIÓN

OK, he tenido la oportunidad de probar el código y todo se ve bien, suponiendo que haya establecido el CSS correctamente. ¿Ya asignó un valor para top en #contentBox? Sin un valor existente, parseInt($('#contentBox').css('top')) devolverá NaN. Aquí está el código que he utilizado:

$(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> 

Nota que he utilizado el operador ternario para simplificar/reducir el código un poco, pero esto es sólo para mantener el tamaño de esta respuesta un poco, y es enteramente Opcional. También acabo de utilizar algunos CSS de prueba para ver lo que estoy haciendo; ¡Estoy seguro de que el tuyo es diferente!

Answer 2

Si está utilizando jQuery 1.6, se puede escribir:

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

y olvidarse de él.

Obviamente, aún necesita CSS para declarar correctamente #contentBox para estar en posición absoluta y todo lo demás.

Answer 3

$('#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/