180翻转滚动列表反向滚动方向 [英] Reverse scroll direction with 180 flipped scroll list

问题描述

我建立一个离子/角度的应用程序，我在，我想逆转滚动投入的滚动方向的情况。

下面柔能找到我的情况为例：

的jsfiddle例子

在上面我翻转滚动列表180度翻转和滚动列表内的div回180度的例子。我这样做，这样的消息总是从底部开始，无需滚动下来在页面加载等。
缺点是，也将滚动方向翻转，这是我需要你的帮助。

我这里问过类似的问题和某人有一般工作答案给我提供了（他的答案也是我的jsfiddle的例子），但在我的情况，我无法得到它的工作。

在code以下是我的其他问题的工作答案，但不是在我的情况下工作：结果
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三角形）;
    }）;    返回{};
}）;
 

解决方案

下面是一个更新的的jsfiddle

而不是使用CSS来扭转名单，我用自定义过滤器：

  app.filter（反向，函数（）{
  返回功能（项）{
    返回items.slice（）反向（）。
  };
}）;
 

和把它应用到NG-重复列表。

  NG-重复=在main.items项目|反向
 

该列表只是视觉上扭转而不是div的。 THX给你不必砍滚动

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

解决方案

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

这篇关于180翻转滚动列表反向滚动方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！