JQuery mousewheel

Ответ 1

Просто угадайте: добавляет ли добавление + 'px' в значение CSS? На самом деле, что означает "медиа"?

UPDATE

Хорошо, у меня была возможность проверить ваш код, и все выглядит хорошо, предполагая, что вы правильно настроили CSS. Вы уже присвоили значение для top на #contentBox уже? Без существующего значения parseInt($('#contentBox').css('top')) вернет NaN. Вот код, который я использовал:

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

Обратите внимание, что я использовал тернарный оператор, чтобы немного упростить/уменьшить код, но это просто немного уменьшить размер этого ответа и полностью необязательно. Я также просто использовал некоторый тестовый CSS, чтобы увидеть, что я делаю; Я уверен, что у вас другое дело.

Ответ 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/

Ответ 3

Если вы используете jQuery 1.6, вы можете написать:

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

и забыть об этом.

Очевидно, вам все еще нужен CSS, чтобы правильно объявить #contentBox в абсолютном позиционировании и все остальное.