iScroll 左右滑动修偏移值
最近项目需要在移动端实现局部滑动,使用iScroll 4.25插件实现,在使用的过程中,需求方提出需要修正偏移值,避免出现以下问题,如图:
a链接显示一半的时候,点击需要修正A的偏移值,一开始想到用LEFT在修正,代码如下:
//滑动特效 if($("#wrapper-top").length > 0) { var topScroll = new iScroll('wrapper-top',{hScrollbar:false, vScrollbar:false}); } $(".code-list nav a").click(function () { $(this).addClass("active").siblings().removeClass("active"); //调整LEFT值 var len = $(".code-list .scroll a").length; var aW =Math.ceil($(".code-list .scroll a").width() + parseFloat($(".code-list .scroll a").css("margin-left"))); var index = $(this).index(); var left = 0; if(len<=4){ return false; }; if(index<2){ $(".code-list nav").animate({"left":left}); }else if(index > len-3){ left = -parseInt(aW*(len-4),10)-6; $(".code-list nav").animate({"left":left}); }else{ left = -parseInt(aW*(index-1),10); $(".code-list nav").animate({"left":left}); } });
测试发现会有BUG,具体表现为:
如果只是点击切换,不滑动的时候,完好
只滑动,不点击的时候,也不会出问题
手指滑动之后,再去点击A的时候,会出现bug,LEFT值与图像上的表现不符,偏移了非常多,最厉害的时候出现整个A的列表都消失了。。。。
调试很久,发现原来是点击后计算出的left值和手指滑动后的偏移值叠加了,如left值是-100,偏移值(transform: translate(-100px, 0px))是-100,那就过就变成-200了,
解决方法:
//滑动特效
if($("#wrapper-top").length > 0) {
var topScroll = new iScroll('wrapper-top',{hScrollbar:false, vScrollbar:false});
}
//点击添加active和去掉兄弟元素上的active $(".code-list nav a").click(function () { $(this).addClass("active").siblings().removeClass("active"); //调整LEFT值 var index = $(this).index(); var left = 0; if(len<=4){ return false; }; if(index<2){ left = 0; }else if(index > len-3){ left = -parseInt(aW*(len-4),10)-6; }else{ left = -parseInt(aW*(index-1),10); } top_nav_mark(index,left); topScroll.scrollTo(left,0,500); //就是这个实现了偏移修正,这个方法是iScroll里面的方法 });