jquery mousewheel

Question

I want to scroll the content of a div with the mousewheel jquery plugin. I have this but its not working. Any thoughts?

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

Gilliland

Real answer: #8886781 – Wellchosen

Answer 1

Just a guess : does adding + 'px' to the CSS value fix things? Actually, what does 'media' refer to?

UPDATE

OK, I've had a chance to test your code and it all looks good, presuming you've set the CSS up properly. Have you actually assigned a value for top on #contentBox already? Without an existing value, parseInt($('#contentBox').css('top')) will return NaN. Here's the code that I used:

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

Note that I've used the ternary operator to simplify/reduce the code a bit, but this is just to keep the size of this answer down a bit, and is entirely optional. I've also just used some test CSS there to see what I'm doing; I'm sure yours is different!

Moppet

sorry see edit above. i was calling #contentBox as media at one point but that didnt work either – Gilliland

I know it's obvious, but a console.log() of delta and your .css.('top', ...) call will tell you where the problem is. – Moppet

Also, is that the actual code, exactly? Looks like you're missing a $ between the two parens after parseint – Moppet

code updated... the div will still not scroll with the mousewheel – Gilliland

You get a chance to try the debug? – Moppet

delta undefined always – Nucleolated

Answer 2

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

Sikang

Why in my browser both Firefox and Chrome on Ubuntu need to use this to make it work :( var delta = e.wheelDelta || -e.detail || e.originalEvent.wheelDelta || -e.originalEvent.detail – Hengist

Answer 3

If you are using jQuery 1.6, you can write:

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

and forget about it.

Obviously, you still need CSS to properly declare #contentBox to be in absolute positioning and all the rest.

Conductivity