Sandbox: JavaScript

Continues scrolling an element if the user has scrolled past a threshold. Otherwise, scroll back to the starting position.

Example

scroll down
scroll up
<div class="scroll-container" data-behavior="ContinueScroll">
  <div class="top-half">
    scroll down
  </div>
  <div class="bottom-half">
    scroll up
  </div>
</div>

Behavior Options

These options apply only to the data- tag invocation.

Name type default description
scrollAxis String 'y' The axis we wish to scroll along.
threshold Number 0.1 If we scroll more than this amount, scroll the rest of the way. Otherwise, we return to the original scroll position.
transition String 'ease:in:out' The transition type the scroller uses.
completeClass String 'scroll-complete' The class to add to the element when the scroll is completed.