Skip to content

Instantly share code, notes, and snippets.

@nameoverflow nameoverflow/scroll.coffee
Last active Aug 29, 2015

Embed
What would you like to do?
getOffsetTop = (el) ->
y = 0
while el.offsetParent
y += el.offsetTop
el = el.offsetParent
return +y
window.NScroll = (selector, option) ->
option = option || {}
option.width = option.width || 5
option.bgc = option.bgc || null
option.color = option.color || '#000000'
option.radius = option.radius || 5
el = document.querySelectorAll selector
el = el[0]
el.style.position = 'relative'
el.style.overflow = 'hidden'
outer = el.clientHeight
inner = el.scrollHeight
scrollHandler = (e) ->
target = e.target
deltaX = e.wheelDeltaX || 0
deltaY = e.wheelDeltaY || 0
deltaX || deltaY || (deltaY = e.wheelDelta || 0)
Math.abs(deltaX) > 1.2 && (deltaX *= option.stepsize / 120)
Math.abs(deltaY) > 1.2 && (deltaY *= option.stepsize / 120)
e.preventDefault()
scrollInit = (el) ->
outer = outer
inner = inner
bar_height = outer * outer / inner
@scr = document.createElement('div')
@scr.style.position = 'absolute'
@scr.style.right = 0
@scr.style.top = 0
@scr.style.height = outer + 'px'
@scr.style.width = option.width + 'px'
@scr.style.backgroundColor = option.bgc
###
@scr.style = {
position: 'absolute'
right: 0
top: 0
height: outer + 'px'
width: option.width + 'px'
backgroundColor: option.bgc
}###
@scr_bar = document.createElement('div')
@scr_bar.style.position = 'absolute'
@scr_bar.style.top = 0
@scr_bar.style.right = 0
console.log bar_height
@scr_bar.style.height = bar_height + 'px'
@scr_bar.style.width = option.width + 'px'
@scr_bar.style.backgroundColor = option.color
@scr_bar.style.borderRadius = option.radius + 'px'
###
@scr_bar.style = {
position: 'absolute'
top: 0
right: 0
height: bar_height + 'px'
width: option.width + 'px'
backgroundColor: option.color
borderRadius: option.radius + 'px'
}###
scr = @scr
scr_bar = @scr_bar
el.appendChild(scr)
scr.appendChild(scr_bar)
startY = 0
startTop = 0
scrMove = (pos) ->
rate = outer / inner
scr.style.top = pos / rate + 'px'
scr_bar.style.top = pos + 'px'
el.scrollTop = pos / rate
mousemoveHandler = (e) ->
target = e.target
y = e.clientY
dy = y - startY
curTop = if startTop + dy < 0 then 0 else if startTop + dy > outer - bar_height then outer - bar_height else startTop + dy
scrMove curTop
e.preventDefault()
mouseupHandler = (e) ->
window.removeEventListener 'mousemove', mousemoveHandler
mousedownHandler = (e) ->
target = e.target
startY = e.clientY
startTop = scr_bar.offsetTop
if target is scr_bar
window.addEventListener 'mousemove', mousemoveHandler, false
e.preventDefault()
return false
scr_bar.style.top = (if e.clientY > outer - bar_height then outer - bar_height else e.clientY) + 'px'
e.preventDefault()
console.log scr.addEventListener 'mousedown', mousedownHandler
window.addEventListener 'mouseup', mouseupHandler
scrollInit(el)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.