Ionic ScrollBar

gistfile1.coffee

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]
  }

gistfile2.css

.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;
}

Ionic Scrollbar.md

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.