ionic框架获取页面距离顶部滚动了多少距离的方法

众所周知用ionic框架开发手机app，为了页面能像源生app一样滑动流畅，页面的body高度永远是固定的等于窗口高度，滑动是靠ion-content标签里面生成的scroll div实现的，<div class="scroll" style="transform: translate3d(0px, 0px, 0px) scale(1);"></div>这是页面加载完成生成的div结构。

1.官方文档有说明提供的参数

$ionicScrollDelegate.getScrollPosition().top

直接用if判断这行代码取到的值就行。官方链接

这个是最简单的，使用这个控制器要加上$ionicScrollDelegate

function MainCtrl($scope, $ionicScrollDelegate) {

2.直接获取scroll的transform然后过滤字符串，用这个方法是因为官方提供的方法有bug，有时候取到的值是0

直接上代码

HTML代码

<ion-content id="tabsubject"></ion-content>

JS代码

var nowTransform = document.getElementById('tabsubject').getElementsByClassName("scroll")[0].style.transform;
        console.log(nowTransform);
        var startIndex = nowTransform.indexOf('(')+1;             
        var endIndex = nowTransform.indexOf(')');  
        var nowTranslate = nowTransform.substring(startIndex,endIndex);
        var translateArr = nowTranslate.split(",");
        myScrollTop=translateArr[1].replace(/-|px/g, "");
        console.log(myScrollTop);

我们的项目不允许引用jquery，所以只能用js获取类名。页面加载完成时第一个输出是translate3d(0px, 0px, 0px) scale(1)

第二个输出是0

代码解释：

1.获取scroll的transform值

2.用indexof方法获取transform3个参数的起始坐标

3.用substring方法截取字符串只保留3个px参数，到这一步字符串就应该是  0px,0px,0px 

4.定义一个数组通过split方法去掉，    然后只把3个参数插入数组

5.取数组translateArr[1]就顺利取到了中间的Y轴坐标0px，因为可能是-20px这种，所以过滤掉-和px，就取出了最终需要的距离。

第二个去滚动值的方法最好放在某个事件里面触发，scroll的transform值是框架生成出来的，所以直接在load事件就获取可能取到空值而且页面会报错，注意js的加载顺序就行。

参考的是这位大神的博客

垂直滚动值：document.getElementById("myscroll").scrollTop；

值得注意的是他的这个安卓机的取值方法亲测是无效的，直接用第二种方法取transform值是最可行的，兼容性好。