Fork me on GitHub

angular-snapscroll

angular-snapscroll adds vertical scroll-and-snap functionality to angular.

  1. JS-only implementation
  2. Requires only angular core
  3. 5.7kB when minified, 2.1kB when gzipped

This is a suite of snapscroll examples that demonstrantes:

Nested snapscrolls

Instances can be nested, side by side etc and won't interfere with each other. The first nested snapscroll below also demostrates how to keep vertical swipe gestures localized to a nested snapscroll instance.

1
2
3
4
5
1
2
3
4
5
1
2
3
4
5

Callbacks

Callbacks are passed a snapIndex parameter. In the beforeSnap callback, this is the index being snapped to while in the afterSnap callback, it's the index just snapped to.

Returning false in the beforeSnap callback disables snapping. In this example, it's impossible to snap to the last snap (unless by scrolling manually).

Note: callbacks are executed on the initial snap on page load and also after a manual scroll.

1
2
3
4
5

before-snap messages:

  • {{ message }}

after-snap messages:

  • {{ message }}
This <div> is inside a child element whose height is greater than the snapscroll element
Nested snapscroll with only one child element that fills the browser viewport height using fit-window-height