Odo Scroll Feedback

The Scroll Feedback class is an event emitter. It listens for input from the user: mouse, keyboard, or touch. Based on the input, the OdoScrollFeedback instance will emit navigation events with a direction property signifying which way the user should be taken. It's up to the implementer to decide what to do with these events.

Support

IE9+ with polyfills.

To support IE<=11, you will need to add a Element#closest polyfill.

Dependencies

TinyEmitter. Assumes Object.assign and Element.prototype.closest exist. You may need to polyfill these.

Basic Usage

In this example, the body element is the main element given to the scroll feedback class. It will be used to bind event listeners to (mouse wheels).

var scrollFeedback = new OdoScrollFeedback(document.body);

scrollFeedback.on(OdoScrollFeedback.Events.NAVIGATE, function (data) {
  switch (data.direction) {
    case OdoScrollFeedback.Direction.NEXT:
      console.log('go to the next state');
      break;
    case OdoScrollFeedback.Direction.PREVIOUS:
      console.log('go to the previous state');
      break;
    case OdoScrollFeedback.Direction.START:
      console.log('home key pressed');
      break;
    case OdoScrollFeedback.Direction.END:
      console.log('end key pressed');
      break;
  }
});

Scroll to Continue ↓

Free Scrolling

The OdoScrollFeedback instance will disable native scrolling on whatever element you instantiate it with. On this page, the body has been used, so you are unable to scroll the page with the mouse or keyboard.

If you wish a section to be free-scrolling, there are two options. The first is to have the free-scrolling section outside (not a child element) of element given to the OdoScrollFeedback. Alternatively, you can use the ignore option. Make this a selector string and if a parent of the event.target matches the selector, the event will be ignored.

var scrollFeedback = new OdoScrollFeedback(document.body, {
  ignore: '.js-free-scroll'
});

The footer on this page uses the ignore option.

Try scrolling inside me.

Scroll to Continue ↓

Timing

The timings and thresholds are fully customizable via an options object. The defaults try to strike a balance between scrolling with a lot of force and not feeling stuck.

Options

Each option is described below. The ignore option lets the user scroll/swipe inside an element and the OdoScrollFeedback class will not try to interpret the user's intent.

OdoScrollFeedback.Defaults = {
  ignore: null, // A selector string matching elements which should not be interpreted
  movementThreshold: 5, // Amount needed in deltaY (touch or mouse wheel) before event is emitted.
  scrollEndDelay: 350, // The amount of time between scrolls to trigger scroll end
  scrollTimerDelay: 2000 // Delay before one continuous scroll triggers scroll end
};