jquery колесико мыши

Я хочу прокручивать содержимое 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;
}); 
});

jquery mousewheel
person user520300    schedule 15.05.2011    source источник
comment
Реальный ответ: stackoverflow.com/questions/8886281/< /а>   -  person    schedule 22.12.2012

Ответы (3)


arrow_upward
7
arrow_downward

Просто предположение: исправит ли добавление + 'px' к значению CSS? Собственно, что означает слово «медиа»?

ОБНОВЛЕНИЕ

Хорошо, у меня была возможность протестировать ваш код, и все выглядит хорошо, если вы правильно настроили 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, чтобы посмотреть, что я делаю; Я уверен, что у вас все иначе!

person Bobby Jack    schedule 15.05.2011
comment
извините, см. редактирование выше. в какой-то момент я вызывал #contentBox как медиа, но это тоже не сработало - person user520300; 16.05.2011
comment
Я знаю, что это очевидно, но console.log() delta и ваш вызов .css.('top',...) скажут вам, в чем проблема. - person Bobby Jack; 16.05.2011
comment
Кроме того, это точно код? Похоже, вам не хватает $ между двумя скобками после parseint - person Bobby Jack; 16.05.2011
comment
код обновлен... div по-прежнему не будет прокручиваться колесиком мыши - person user520300; 16.05.2011
comment
У вас есть шанс попробовать отладку? - person Bobby Jack; 16.05.2011
comment
дельта не определена всегда - person Muhammad Umer; 19.08.2013

arrow_upward
15
arrow_downward 

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

person ruvan    schedule 29.05.2012
comment
Почему в моем браузере и Firefox, и Chrome на Ubuntu должны использовать это, чтобы заставить его работать :( var delta = e.wheelDelta || -e.detail || e.originalEvent.wheelDelta || -e.originalEvent.detail - person Kannika; 05.02.2014

arrow_upward
3
arrow_downward

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

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

и забудьте об этом.

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

person Simone Gianni    schedule 04.06.2011