Javascript mousehweel функция в плагине jQuery

Question

У меня есть следующая скрипка: http://jsfiddle.net/p4jbh3ye/9/

Как видите, у меня есть 2 ul элементов с li, которые прокручиваются с шагами.

Но когда яиспользуйте это в плагине jQuery, он не прокручивает шаги, он ничего не делает:

(function ( $ ) {
  $.fn.timeshift = function( options ) {

    var defaults = {
      height: 35,
      hourClock: 24,
      steps: 15,
      startTime: 0,
      endTime: 23,
      wrapperAttrs : {
        class: "timeshift-placeholder"
      },
    };

    var filteredOptions = {};
    $.each(options, function( index, value ) {
      if (index in defaults === true) {
        filteredOptions[index] = value;
      }
    });

    var settings = $.extend( {}, defaults, filteredOptions );

    var timeSheet =
      {
        0: 12,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        6: 6,
        7: 7,
        8: 8,
        9: 9,
        10: 10,
        11: 11,
        12: 12,
        13: 1,
        14: 2,
        15: 3,
        16: 4,
        17: 5,
        18: 6,
        19: 7,
        20: 8,
        21: 9,
        22: 10,
        23: 11
      };

    var hourElement = $('<ul id="hours"></ul>');
    for (var i = 0; i <= 23; i++) {
      var hourValue = (settings.hourClock === 24? i:timeSheet[i]);

      var element = $('<li class="timeItem">'+hourValue+'</li>');
      hourElement.append(element);
    }

    var minuteElement = $('<ul id="minutes"></ul>');
    for (var i = 0; i <= 59; i++) {
      var element = $('<li class="timeItem">'+i+'</li>');
      minuteElement.append(element);
    }

    var scrollHeight = 0;
    minuteElement.bind('mousewheel', function(event) {
      var scrollPosition = $(this).scrollTop();
      if (event.originalEvent.wheelDelta >= 0) {
        if (scrollPosition <= scrollHeight) {
          $(this).scrollTop(scrollHeight - settings.height);
          scrollHeight = $(this).scrollTop();
        }
      } else {
        if (scrollPosition <= scrollHeight) {
          $(this).scrollTop(scrollHeight + settings.height);
          scrollHeight = $(this).scrollTop();
        }
      }
    });

    hourElement.bind('mousewheel', function(event) {
      var scrollPosition = $(this).scrollTop();
      if (event.originalEvent.wheelDelta >= 0) {
        if (scrollPosition <= scrollHeight) {
          $(this).scrollTop(scrollHeight - settings.height);
          scrollHeight = $(this).scrollTop();
        }
      } else {
        if (scrollPosition <= scrollHeight) {
          $(this).scrollTop(scrollHeight + settings.height);
          scrollHeight = $(this).scrollTop();
        }
      }
    });

    this.append(hourElement);
    this.append(minuteElement);

    var timeshift = this
      .attr(settings.wrapperAttrs)
      .css('min-height', settings.height)
      .css('max-height', settings.height)
      .css('height', settings.height);
    return timeshift;

  };

}( jQuery ));

Моя цель - сгенерировать 2 ul в div с плагином jQuery, где я могу прокрутитьс шагами с колесом мыши.

Answer 1

В вашем коде прокрутки отсутствует event.preventDefault();, поэтому прокрутка ведет себя как обычная прокрутка, поэтому вы устанавливаете прокрутку на заданное значение, но затем событие прокрутки сохраняет свое нормальное поведение. Вы должны вставить warnDefault.

Пример:

    hourElement.bind('mousewheel', function(event) {
      var scrollPosition = $(this).scrollTop();
          console.log('scrollPosition', scrollPosition);
      if (event.originalEvent.wheelDelta >= 0) {
        if (scrollPosition <= scrollHeight) {
          $(this).scrollTop(scrollHeight - settings.height);
          scrollHeight = $(this).scrollTop();
          event.preventDefault();
        }
      } else {
        if (scrollPosition <= scrollHeight) {
          $(this).scrollTop(scrollHeight + settings.height);
          scrollHeight = $(this).scrollTop();
          event.preventDefault();
        }
      }
    });

Рабочая скрипка здесь:

http://jsfiddle.net/2kbrfv9z/