JSFiddle - React, Tailwind, and code Playground

Angular scrollable table. Has scrollbars on the outside of the viewport, and the scrolling event linked to the table

by jamescoot

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="filterCtrl">
  <ul ng-show="counter < 4">
      <li ng-repeat="item in items | custom:counterUpdate">{{item}}</li>
  </ul>
</div>

JavaScript

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

app.filter("custom", function(){ 
  return function(input, counterUpdate) {
    var length = input.length - 2;
    
    for(var i = 0; i < length; i++) input.pop();
    
    return input;
  };
});

app.controller("filterCtrl", function($scope, $document, $timeout) {
	var originalItems = [];
  originalItems.push("Item 1");
  originalItems.push("Item 2");
  originalItems.push("Item 3");
  originalItems.push("Item 4");
  originalItems.push("Item 5");
  $scope.items = originalItems;

  $scope.counter = $scope.items.length;
  
  $scope.$watch("items.length", function(newValue, oldValue) { 
  	$scope.counter = newValue;
  });
});