Я хочу прокрутить содержимое div с помощью плагина jQuery mousewheel. У меня есть это, но оно не работает. Любые мысли?
$(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;
});
});
Просто угадайте: добавляет ли добавление + '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, чтобы увидеть, что я делаю; Я уверен, что у вас другое дело.
$('#contentBox').bind('mousewheel DOMMouseScroll', function(event) {
event.preventDefault();
var delta = event.wheelDelta || -event.detail;
$(this).css({'top': $(this).position().top + (delta > 0 ? '+=40' : '-=40')});
});
Если вы используете jQuery 1.6, вы можете написать:
$('#contentBox').css('top','+=40');
и забыть об этом.
Очевидно, вам все еще нужен CSS, чтобы правильно объявить #contentBox в абсолютном позиционировании и все остальное.