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.


IE9+ with polyfills.

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


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');
    case OdoScrollFeedback.Direction.PREVIOUS:
      console.log('go to the previous state');
    case OdoScrollFeedback.Direction.START:
      console.log('home key pressed');
    case OdoScrollFeedback.Direction.END:
      console.log('end key pressed');
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 ↓


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.


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
Scroll to Continue ↓
No one looks better in a hat than you.
Scroll to Continue ↓
You always have the best ideas.
Scroll to Continue ↓
Is there anything you can’t do?
Scroll to Continue ↓
Don’t tell anyone, but you’re my favorite.
Scroll to Continue ↓
I wish I could put you in my pocket and carry you around with me all day.
Scroll to Continue ↓