25%
50%
75%
100%
200px
100px

Odo Viewport

Viewport enter and exit monitoring for elements.

Support

IE9+. This component expects window.requestAnimationFrame and window.cancelAnimationFrame to exist. A polyfill is included on the page for demo and testing purposes, but it’s likely you already have this in your project.

Dependencies

Odo Window Events, ES6 Object.assign and Map.

filler
filler
filler

Viewport Enter

This example only registers a enter handler. After it is called, the viewport item is removed from the viewport instance’s list of viewport items. If there are no more viewport items left to watch, the viewport instance will remove its window scroll and resize listeners. Adding a new viewport item will trigger the viewport instance to add the listeners again.

Setup

OdoViewport.add({
  element: document.getElementById('demo-enter'),
  enter: function () {
    this.className += ' is-in-view';
  }
});

Inside the callback, this is the element (demo-enter here). The first parameter is the ViewportItem.

Viewport Enter and Exit

The exit callback will be triggered once the element has completely left the viewport after entering it.

Setup

OdoViewport.add({
  element: document.getElementById('demo-enter-exit'),
  enter: function () {
    this.setAttribute('in-view', true);
  },
  exit: function () {
    this.removeAttribute('in-view');
  }
});

An element which could span the viewport

Threshold

A threshold can be set to determine when the element is “in view”. The default is 200 pixels. This value can also be a percentage string, like '50%' or a value between zero and one which represents a percentage e.g. 0.4. The offset is from the top of the element and the percentage refers to the height of the viewport.

50 Pixel Threshold

OdoViewport.add({
  element: document.getElementById('demo-threshold-50'),
  threshold: 50,
  enter: function () {
    this.setAttribute('in-view', true);
  },
  exit: function () {
    this.removeAttribute('in-view');
  }
});

'50%' Threshold

OdoViewport.add({
  element: document.getElementById('demo-threshold-percent'),
  threshold: '50%',
  enter: function () {
    this.setAttribute('in-view', true);
  },
  exit: function () {
    this.removeAttribute('in-view');
  }
});

-300 Pixel Threshold

OdoViewport.add({
  element: document.getElementById('demo-threshold-negative'),
  threshold: -300,
  enter: function () {
    this.setAttribute('in-view', true);
  },
  exit: function () {
    this.removeAttribute('in-view');
  }
});

Offsets

The viewport component is highly dependent on correct offset values. If you have responsive images which load when near the viewport, or code blocks which are transformed, or anything else that changes the offset of the element being watched, you must notify the viewport component. Offsets are updated on window resize.

// Update element width, height, offset, and process new values.
OdoViewport.update();

Removing Viewport Items

To properly destroy a viewport item, use the static remove method with the id which add returns.

var enterExitId = OdoViewport.add({
  element: document.getElementById('demo-enter-exit'),
  enter: function () {
    this.setAttribute('in-view', true);
  },
  exit: function () {
    this.removeAttribute('in-view');
  }
});

OdoViewport.remove(enterExitId);

Horizontal Offset Elements

Elements which are outside the viewport horizontally are not considered to be "in view". Carousels, for example, often have slides outside the horizontal viewport.

1
2
3
4