Reverse scroll direction with 180 flipped scroll list

问题

I'm building a ionic / angular app and I'm in a situation that I would like to reverse the scroll direction on scroll input.

Here jou can find a example of my situation: jsfiddle example

In the example above I flipped the scroll list 180 degrees and flipped the divs inside the scroll list back 180 degree. I did this so that the messages are always starting at the bottom with no need of scrolling it down on page load etc. The downside is that also the scroll direction is flipped and this is where I need your help.

I asked a similar question here and someone provided me with a general working answer (his answer is also in my jsfiddle example) but in my case I'm not able to get it working.

The code below is a working answer of my other question, but is not working in my situation:
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 {};
});

回答1:

Here is an updated jsfiddle

Instead of using CSS to reverse the list, i used a custom filter :

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

and applied it to the ng-repeat list.

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

The list is just visually reversed and not the divs. Thx to that you don't have to hack the scroll

来源：https://stackoverflow.com/questions/30576111/reverse-scroll-direction-with-180-flipped-scroll-list