JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="MyCtrl">
  <div lp-scroll-pane>
    <div ng-repeat="i in lines">Line</div>
  </div>
</div>

CSS

.scrollPaneWrapper {
  border:solid 1px red;
  overflow: hidden;
  height: 393px;
  , 8, 9 position: relative;
}
.scrollPane {
  overflow-x: hidden;
  width: 796px;
  height: 393px;
  overflow-y: auto;
}
.thumbTrack {
  /*display: none;*/
  height: 100px;
  position: absolute;
  width: 15px;
  background-color: #367AF8;
  right: 0;
  top: 0;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.directive('lpScrollPane', function factory() {
  return {
    restrict: 'A',
    replace: true,
    transclude: true,
    template: '<div class="scrollPaneWrapper"><div class="scrollPane" ng-transclude></div><div class="thumbTrack" ></div></div>',
    link: function (scope, iElement, iAttrs) {
      var minHeight = 30;
      var thumbTrack = angular.element(iElement.children()[1]);

      scope.onScrollHeight = function () {
        console.log(iElement.children()[0].scrollHeight);

        var H1 = iElement[0].offsetHeight;
        var H2 = iElement.children()[0].scrollHeight;
        if (H2 > H1) {
          var trackHeight = Math.round(minHeight + (H1 - minHeight) * (1 - Math.pow((H2 - H1) / H2, 0.8)));
          thumbTrack.css({
            display: "block",
            height: trackHeight + "px"
          });
          console.log(H2, H1, trackHeight);
        } else {
          thumbTrack.css({
            display: "none"
          });
        }
      };
     iElement.ready(function () {  
        scope.$watch(function () {
           scope.onScrollHeight();
        });
      });
    }
  };
});


function MyCtrl($scope) {
  $scope.lines = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
  $scope.i = 0;
  setInterval(function () {
    $scope.$apply(function () {
      $scope.lines.push("line "+ $scope.i);
        $scope.i = $scope.i + 1;
    });
  }, 2000);
}