Smooth scrolling when using keyboard shortcuts

Closes #328.
pull/427/merge
Thibaut Courouble 9 years ago
parent 2826b54dd6
commit 388023ba05

@ -223,6 +223,36 @@ $.lockScroll = (el, fn) ->
fn() fn()
return return
smoothScroll = smoothStart = smoothEnd = smoothDistance = smoothDuration = null
$.smoothScroll = (el, end) ->
unless window.requestAnimationFrame
el.scrollTop = end
return
smoothEnd = end
if smoothScroll
newDistance = smoothEnd - smoothStart
smoothDuration += Math.min 400, Math.abs(smoothDistance - newDistance)
smoothDistance = newDistance
return
smoothStart = el.scrollTop
smoothDistance = smoothEnd - smoothStart
smoothDuration = Math.min 400, Math.abs(smoothDistance)
startTime = Date.now()
smoothScroll = ->
p = Math.min 1, (Date.now() - startTime) / smoothDuration
y = Math.max 0, Math.floor(smoothStart + smoothDistance * (if p < 0.5 then 2 * p * p else p * (4 - p * 2) - 1))
el.scrollTop = y
if p is 1
smoothScroll = null
else
requestAnimationFrame(smoothScroll)
requestAnimationFrame(smoothScroll)
# #
# Utilities # Utilities
# #

@ -59,32 +59,36 @@ class app.views.Content extends app.View
@scrollEl.scrollTop = value or 0 @scrollEl.scrollTop = value or 0
return return
smoothScrollTo: (value) ->
$.smoothScroll @scrollEl, value or 0
return
scrollBy: (n) -> scrollBy: (n) ->
@scrollEl.scrollTop += n @smoothScrollTo @scrollEl.scrollTop + n
return return
scrollToTop: => scrollToTop: =>
@scrollTo 0 @smoothScrollTo 0
return return
scrollToBottom: => scrollToBottom: =>
@scrollTo @scrollEl.scrollHeight @smoothScrollTo @scrollEl.scrollHeight
return return
scrollStepUp: => scrollStepUp: =>
@scrollBy -50 @scrollBy -80
return return
scrollStepDown: => scrollStepDown: =>
@scrollBy 50 @scrollBy 80
return return
scrollPageUp: => scrollPageUp: =>
@scrollBy 80 - @scrollEl.clientHeight @scrollBy 40 - @scrollEl.clientHeight
return return
scrollPageDown: => scrollPageDown: =>
@scrollBy @scrollEl.clientHeight - 80 @scrollBy @scrollEl.clientHeight - 40
return return
scrollToTarget: -> scrollToTarget: ->

Loading…
Cancel
Save