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

发表于2017-04-10 17:11:02

众所周知用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值是最可行的,兼容性好。


评论(0)

请先登录后再评论,如果没有账号请先注册

发表评论