Waypoints

horizontal option

By default, everything in Waypoints land is happening on the vertical axis. Offsets are calculated with regard to the top of the element versus the top of its context, handlers are triggered in response to vertical scrolls, and the direction parameter passed to that handler is either 'down' or 'up'.

When horizontal is set to true, all of this changes to the horizontal axis. Offsets are calculated between the left of the element and the left of the context, and the direction is either set to 'right' or 'left'.

Let's look at the simplest example. Here we'll use a custom context, just to make it easier on this site's design:

<div id="overflow-scroll">
  <div id="horizontal-waypoint">Horizontal</div>
</div>

var waypoint = new Waypoint({
  element: document.getElementById('horizontal-waypoint'),
  handler: function(direction) {
    notify('Horizontal waypoint triggered in the ' + direction + ' direction')
  },
  context: document.getElementById('overflow-scroll'),
  horizontal: true
})

Vertical waypoints have a special possible offset shortcut value, 'bottom-in-view'. Horizontal waypoints have an analog, 'right-in-view'.

<div id="overflow-scroll-offset">
  <div id="horizontal-waypoint-offset">right-in-view offset</div>
</div>

var waypoint = new Waypoint({
  element: document.getElementById('horizontal-waypoint-offset'),
  handler: function(direction) {
    notify('right-in-view waypoint triggered')
  },
  context: document.getElementById('overflow-scroll-offset'),
  horizontal: true,
  offset: 'right-in-view'
})