与AngularJS反向滚动方向方向、AngularJS

我要建一个离子/角应用程序，我在，我想逆转滚动投入的滚动方向的情况。所以，通常，当你向下滚动例如，你也滚动会向下移动的区域。我试图做到的是，当你向下滚动内容向上移动，当你滚动内容向下移动。

那么，这可能扭转滚动方向？

这是我的code：

 ＆LT;！ - 首页 - ＆GT; ＆LT;脚本类型=文/ NG-模板ID =/home.html的＆GT;    ＆LT;离子视图NG控制器=HomeController的标题=主页＆GT;        ＆LT;离子含量＆GT;            ＆LT;离子列表＆gt;                ＆LT;离子项目NG重复=＆GT在邮件的邮件由$指数跟踪;                    {{信息}}                ＆LT; /离子项目＆GT;            ＆LT;离子列表＆gt;        ＆LT; /离子含量＆GT;    ＆LT; /离子视图＆gt;  ＆LT; / SCRIPT＆GT; 

解决方案

是的，这是可能的。看看这个的jsfiddle 。

HTML

 ＆LT; D​​IV NG-应用=scrollApp＆GT;    ＆LT;＆滚动框GT; ＆LT;！ - 我的指令 - ＆GT;        内容将被滚动    ＆LT; /滚动框＆GT;＆LT; / DIV＆GT; 

JavaScript的：

  VAR应用= angular.module（'scrollApp'，[]）;app.directive（'滚动框'，函数（$窗口）{    angular.element（$窗口）.bind（'鼠标滚轮'，函数（事件）{        。事件preventDefault（）; //取消默认滚动        VAR currentPosition = $ window.pageYOffset;        VAR三角洲= event.wheelDelta;        window.scrollTo（0，+ currentPosition三角形）;    }）;    返回{};}）; 

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>

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 {};
});