Skip to content

Instantly share code, notes, and snippets.

@Zren
Last active Aug 29, 2015
Embed
What would you like to do?
Ionic ScrollBar
app.directive 'scrollBar', ($timeout) ->
return {
restrict: 'A'
# require: '^$ionicScroll'
link: ($scope, $element, $attrs) ->
scrollCtrl = $element.controller('$ionicScroll')
unless scrollCtrl
return console.error('mouseWheelScroll must be attached to a $ionicScroll controller.')
return unless scrollCtrl.scrollView.__indicatorY
track = jqLite(scrollCtrl.scrollView.__indicatorY.el)
track.addClass('scroll-bar-track')
onScrollGesture = (e) ->
trackRect = track[0].getBoundingClientRect()
relX = e.gesture.center.pageX - trackRect.left
relY = e.gesture.center.pageY - trackRect.top
cursorY = relY / trackRect.height * scrollCtrl.scrollView.options.getContentHeight()
scrollCtrl.scrollTo(0, cursorY)
onDrag = (e) -> onScrollGesture(e)
onTap = (e) -> onScrollGesture(e)
window.ionic.onGesture 'drag', onDrag, track[0]
window.ionic.onGesture 'tap', onTap, track[0]
}
.scroll-bar-track {
width: 36px;
right: 0px;
top: 0px;
bottom: 0px;
-webkit-transition: background-color 0.3s linear;
-moz-transition: background-color 0.3s linear;
transition: background-color 0.3s linear;
background-color: transparent;
}
.scroll-bar-track:hover {
background-color: rgba(0,0,0,.1);
}
.scroll-bar-track .scroll-bar-indicator {
width: 3px;
right: 2px;
}
.scroll-bar-track:hover .scroll-bar-indicator {
opacity: 1;
}

Bugs:

  • When scrolled to the bottom, after infinite loads more content, the scrollbar should jump to it's new spot. Instead, it will stay where the cursor/finger is, causing another inifinite load.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment