Question

I know there have been several questions regarding the mousewheel and scrolling; I’m not sure if any of them apply to my specific issue. If they do, then I apologize for asking this question.

Nonetheless, I am using jQuery with FullCalendar. More specifically, I entered a small function to trigger the calendar to jump forward or backward when the mouse is scrolled. It works just fine with your typical old-school scroll-wheel. However, when using the Apple Magic Mouse, it scrolls way too much! The current code I am using is:

 $('#my_calendar')
    .bind('mousewheel', function(event, delta) {
    var view = $('#monthCalendar').fullCalendar('getView');

    if (view.name == "month") {
                if (delta > 0) { $(this).fullCalendar('prev'); }
                if (delta < 0) { $(this).fullCalendar('next'); }
                return false;
    }
 });

How would I be able to fix this so that, if a user is using a Magic Mouse (or similar), it might limit the amount of months that are scrolled forward or backward?

Any help would be great! Thank you.

Answer 1

Have you tried a ‘debounce’ function? This is slightly altered from underscore framework:

function debounce(func, wait) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        func.apply(context, args);
      };
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  };

Your resulting code would look like:

 function debounce(func, wait) {
      var timeout;
      return function () {
          var context = this, args = arguments;
          var later = function () {
              timeout = null;
              func.apply(context, args);
          };
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
      };
  };

  var scrolldb = debounce(handleScroll, 200);

  $('#my_calendar').bind('mousewheel', scrolldb);

  function handleScroll(event, delta) {
      var view = $('#monthCalendar').fullCalendar('getView');

      if (view.name == "month") {
          if (delta > 0) {
              $(this).fullCalendar('prev');
          }
          if (delta < 0) {
              $(this).fullCalendar('next');
          }
          return false;
      }
  }

Optimize the ‘wait’ parameter until it works smoothly with the Magic Mouse. I tested this with scroll pad and Magic Mouse.