Reverse scroll direction with AngularJS

问题:

I'm building an Ionic / Angular app and I'm in a situation that I would like to reverse the scroll direction on scroll input. So normally when you scroll down for example the area that you scroll will also move down. What I'm trying to accomplish is that when you scroll down the content moves up and when you scroll up the content moves down.

So is it possible to reverse the scroll direction?

This is my code:

 <!-- home page -->
 <script type="text/ng-template" id=“home.html">
    <ion-view ng-controller=“HomeController" title=“Home page">
        <ion-content>
            <ion-list>
                <ion-item ng-repeat="message in messages track by $index">
                    {{message}}
                </ion-item>
            <ion-list>
        </ion-content>
    </ion-view>
  </script>

回答1:

Yes, it is possible. Look at this 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 {};
});