Scrolling drag

up
Item 1.
Item 2.
Item 3.
Item 4.
Item 5.
Item 6.
Item 7.
Item 9.
Item 10.
Item 11.
Item 12.
Item 13.
down
Item 1.
Item 2.
Item 3.
Item 4.
Item 5.
Item 6.
Item 7.
Item 9.
Item 10.
Item 11.
Item 12.
Item 13.
        
// JS
controller('ScrollingDrag', ['$interval', '$element', 'dragularService', function TodoCtrl($interval, $element, dragularService) {


    var timer,
      leftScrollContainer = document.getElementById('leftScroll'),
      rightScrollContainer = document.getElementById('rightScroll'),
      leftTopBar = document.getElementById('leftTopBar'),
      leftBottomBar = document.getElementById('leftBottomBar'),
      rightTopBar = document.getElementById('rightTopBar'),
      rightBottomBar = document.getElementById('rightBottomBar');

    dragularService.cleanEnviroment();
    dragularService([leftScrollContainer, rightScrollContainer]);

    registerEvents(leftTopBar, leftScrollContainer, -5);
    registerEvents(leftBottomBar, leftScrollContainer, 5);
    registerEvents(rightTopBar, rightScrollContainer, -5);
    registerEvents(rightBottomBar, rightScrollContainer, 5);

    function registerEvents(bar, container, inc, speed) {
      if (!speed) {
        speed = 20;
      }
      angular.element(bar).on('dragularenter', function() {
        container.scrollTop += inc;
        timer = $interval(function moveScroll() {
          container.scrollTop += inc;
        }, speed);
      });
      angular.element(bar).on('dragularleave dragularrelease', function() {
        $interval.cancel(timer);
      });
    }
  }])
        
      
        
<!-- HTML -->
<div ng-controller="ScrollingDrag">
    <div class="containerVertical scrollingDrag">
      <div class="scrollBar" id="leftTopBar">up</div>
      <div id="leftScroll" class="scrollingDragInner">
        <div>Item 1</div>
        <div>Item 2</div>
            ...
      </div>
      <div class="scrollBar" id="leftBottomBar">down</div>
    </div>
    <div class="containerVertical scrollingDrag">
      <div class="scrollBar" id="rightTopBar">up</div>
      <div id="rightScroll" class="scrollingDragInner">
        <div>Item 1</div>
        <div>Item 2</div>
            ...
      </div>
      <div class="scrollBar" id="rightBottomBar">down</div>
    </div>
  </div>
        
      
        
// CSS
.scrollingDrag {
  width: 45%;
  display: inline-block;
}

.scrollingDragInner {
  max-height: 200px;
  overflow-y: auto;
}

#rightTopBar,
#rightBottomBar {
  background: transparent;
  position: relative;
  height: 20px;
}

#rightTopBar {
  top: 10px;
}

#rightBottomBar {
  bottom: 10px;
}

div.scrollBar {
  background: yellow;
  text-align: center;
  padding: 1px;
}