zoukankan      html  css  js  c++  java
  • 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里面的方法
            });
  • 相关阅读:
    105.输出控制缓存
    修正IE6中FIXED不能用的办法,转载
    Linux C语言 网络编程(二) server模型
    阿里巴巴实习生面试悲慘经历
    初学JDBC,JDBC工具类的简单封装
    初学JDBC,最简单示例
    判断不同浏览器
    POI读写Excel简述之写入
    POI读写Excel简述之读取
    eclipse中新建javaweb项目,查看某些类的源码
  • 原文地址:https://www.cnblogs.com/sanfense/p/4871708.html
Copyright © 2011-2022 走看看