原
众所周知用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值是最可行的,兼容性好。
下一篇》:前端常用框架,插件推荐
© 2010-2016 学H5
© 版权所有 xueh5.com,Inc. All Rights Reserved. 浙ICP备16008290号-1
评论(0)
请先登录后再评论,如果没有账号请先注册
发表评论