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);
     }
 },

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值