通过 180 度翻转滚动列表反转滚动方向

我正在构建一个离子/角度应用程序，并且我想在滚动输入上反转滚动方向。

在这里你可以找到我的情况的一个例子：jsfiddle 示例

在上面的示例中，我将滚动列表翻转了 180 度，并将滚动列表内的 div 翻转了 180 度。我这样做是为了使消息始终从底部开始，无需在页面加载等时向下滚动。 缺点是滚动方向也被翻转，这就是我需要你的帮助的地方。

我问过类似的问题here有人为我提供了一个通用的工作答案（他的答案也在我的 jsfiddle 示例中），但就我而言，我无法让它工作。

下面的代码是我的其他问题的有效答案，但在我的情况下不起作用：
HTML:

<div ng-app="scrollApp">
    <scrollbox> <!-- my directive -->
        Content to be scrolled
    </scrollbox>
</div>

javascript:

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

app.directive('scrollbox', function($window) {

    angular.element($window).bind('mousewheel', function(event) {        

        event.preventDefault(); // cancel the default scroll

        var currentPosition = $window.pageYOffset;
        var delta = event.wheelDelta;                         
        window.scrollTo(0, currentPosition + delta);
    }); 

    return {};
});

这是更新的jsfiddle

我没有使用 CSS 来反转列表，而是使用了自定义过滤器：

app.filter('reverse', function() {
  return function(items) {
    return items.slice().reverse();
  };
});

并将其应用到 ng-repeat 列表中。

ng-repeat="item in main.items | reverse"

列表只是视觉上颠倒的，而不是 div。谢谢你不必破解卷轴