Question

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

在这里，您可以找到我的情况示例：jsfiddle example

在上面的示例中，我将滚动列表翻转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 {};
});

Answer 1

这是更新的jsfiddle

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

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

并将其应用于ng-repeat列表。

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

列表只是视觉上反转而不是div。那就是你不必破解卷轴

用180翻转滚动列表反向滚动方向

1 个答案: