javascript - 使用 AngularJS 反转滚动方向

Question

我正在构建一个 Ionic/Angular 应用程序，我想在滚动输入时反转滚动方向。 所以通常当你向下滚动时，你滚动的区域也会向下移动。 我想要完成的是，当您向下滚动时，内容会向上移动，而当您向上滚动时，内容会向下移动。

那么是否可以反转滚动方向呢？

这是我的代码:

 <!-- 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>

Answer 1

是的，这是可能的。看这个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 {};
});