better-scroll设置滑动距离如果超出可视宽口会继续滑动

在项目中,有很多tab,用better-scroll使滑动更流畅
产品要求每次被点击选中的tab都要趋向中间展示,不用better-scroll时即使设置了scrollleft=-100,滚动轴也只在0处就停止了,但是better-scroll后,你设置多少就能滚动多少,第一个tab真滚到中间去了,前面都是空白,这不是我们想要的效果。
解决办法是根据情况判断滚动的距离

//初始化better-scroll
  bScroll:function(){
      vm.myScroll = new BScroll('.shop_raw_category', {
          scrollX:true, //x轴滚动
          click: true,
          stopPropagation:true,  //取消冒泡
          bindToWrapper:true, //move 事件绑定到滚动的容器上
      });

//计算可滚动的最大距离
var scrollW = parseInt(vm.myScroll.wrapperWidth) - parseInt(vm.myScroll.scrollerWidth);


//计算要滚动的距离
 var item = $(".selected");
 var container = $(".shop_raw_category");
 var itemOffset = item.offset();
 var itemOffsetLeft = -itemOffset.left + vm.myScroll.x;
 var centerLeft = ( container.width() - item.width()) / 2;
 var sl = itemOffsetLeft + centerLeft;
 //滚动到计算好的地方
vm.scrollingH(sl);

//滚动到计算好的地方
 scrollingH: function(sl){
     if(sl<0 && sl>scrollW){
         myScroll.scrollTo(sl,0);
     }else if(sl<=scrollW){
         myScroll.scrollTo(scrollW,0);
     }else if(sl>=0){
        myScroll.scrollTo(0,0);
     }
 },

你可能感兴趣的:(Library)