snap scroll.coffee

window.addSnapScroll = ($element) ->
        width_of_two_columns = 550  # (Width of column 270 + padding of column 10) * 2 - 10
        data = {}

        $element.bind 'touchstart', (e) ->
            if document.width > width_of_two_columns
                return
            page_x = e.originalEvent.touches[0].pageX
            page_y = e.originalEvent.touches[0].pageY
            $this = $ this
            data.x = page_x
            data.y = page_y
            data.last_x = page_x
            data.last_y = page_y
            data.direction = 0
            data.orientation = null
            data.time = +new Date()
            data.scroll = $this.scrollLeft()

        $element.bind 'touchmove', (e) ->
            if document.width > width_of_two_columns
                return
            page_x = e.originalEvent.touches[0].pageX
            page_y = e.originalEvent.touches[0].pageY
            delta_x = data.x - page_x
            delta_y = data.y - page_y
            last_delta_x = data.last_x - page_x
            last_delta_y = data.last_y - page_y
            data.last_x = page_x
            data.last_y = page_y
            abs_last_delta_x = Math.abs last_delta_x
            abs_last_delta_y = Math.abs last_delta_y

            if not data.orientation
                if abs_last_delta_x > abs_last_delta_y
                    data.orientation = 'horizontal'
                    data.direction = if last_delta_x > 0 then 1 else -1
                else
                    data.orientation = 'vertical'
                    data.direction = if last_delta_y > 0 then 1 else -1

            if data.orientation is 'vertical'
                return

            $this = $ this
            e.preventDefault()
            scroll_to = data.scroll + delta_x
            requestAnimationFrame ->
                $this.scrollLeft scroll_to


        $element.bind 'touchend', (e) ->
            if document.width > width_of_two_columns
                return
            $this = $ this
            scroll_left = $this.scrollLeft()
            column_width = 280
            padding_width = (window.innerWidth - column_width) / 2

            delta_time = +new Date() - data.time
            # If there is a flick, just move to the column
            if delta_time < 250
                if data.orientation is 'horizontal'
                    scroll_left += data.direction * column_width / 2

            # Basically we calculate where the scroll should snap to
            if (scroll_left %% column_width) > (column_width - padding_width * 2) / 2
                scroll_left += column_width

            scroll_to = (scroll_left // column_width) * column_width
            scroll_to -= padding_width
            $this.animate
                scrollLeft: scroll_to
            , 200