scroll-tutorial.md

In this tutorial we'll create a simulated scroller, which springs when it hit's the edges, and springs back into place if you overscroll outside the bounds.

In this guide I'm using jquery because it makes it easier to get the dimensions of elements in a clean way. Writing a non-jquery version can be an exersize for the reader.

We'll start off by creating a physics object for the scrollable area.

var scroller = Physics(scrollerEl)
  .style('translateY', function(pos) { return pos.y + 'px' })

Then we'll create a boundry for where the scroll element is allowed to move.

var boundry = new Physics.Boundry({
  top: -(scrollerEl.height() - scrollContainerEl.height()),
  bottom: 0,
  left: 0,
  right: 0
})

var drag = scroller.drag({ boundry: boundry, damping: .5 })

function end() {
  var end
    , position = scroller.position().y

  if(scroller.direction('up') || position < boundry.top)
    end = { x: 0, y: boundry.top }
  else if(that.phys.direction('down') || position > boundry.bottom)
    end = { x: 0, y: boundry.bottom }

  //there is a case where there is no end set, namely, zero velocity.
  if(end) {
    if(boundry.contains({ x: 0, y: position })) {
      that.phys.decelerate({ deceleration: 1000 }).to(end).start()
        .then(that.phys.spring({ tension: 70, damping: 13 }).start)
    } else {
      that.phys.spring({ tension: 70, damping: 13 }).to(end).start()
    }
  }
}
drag.on('end', end)