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

﹏ヽ暗。殇╰゛Y 2022-01-28 03:37 455阅读 0赞

在项目中，有很多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 条评论，455人围观）

还没有评论，来说两句吧...

相关阅读

相关 body设置背景图,不会跟着滑动

![在这里插入图片描述][20191117173956509.png] body\{ background: url(…/…/zblog/img/login-bg.jp

痛定思痛。/ 2023年06月13日 13:28/ 0 赞/ 121 阅读

相关 Vue+Swiper 滑动到最后一个卡片时继续滑动跳转页面

最近PM提出了这样的一个需求，卡片可以横向滑动，当滑动到最后一个卡片，且还在滑动时，要跳转到另一个页面。这是就需要把握一个范围，当超过这个范围时，就进行跳转，否则不跳转。 1

素颜马尾好姑娘i/ 2022年10月12日 14:53/ 0 赞/ 506 阅读

相关 Android 获取RecyclerView滑动的距离

一、如何获取 RecyclerView 的滑动距离 RecyclerView 虽然有getScrollX() 和 getScrollY(), 但是测试发现这两个函数总是返

女爷i/ 2022年09月12日 14:43/ 0 赞/ 394 阅读

相关 js获取可视化区域的宽和高以及滑动条距离顶部的距离

1.注意由于浏览器的多样性，所以我们在获取页面可视化区域的宽和高时，要在各个浏览器之间实现兼容。 2.与获取可视化区域宽、高一样，在我们获取页面滑动条距离顶部的距离的时候也会

亦凉/ 2022年06月15日 23:48/ 0 赞/ 195 阅读

相关系统最小滑动判断距离打印

大于这个距离滑动才被判定为滑动 Log.d(TAG, "滑动判断距离 = "+ViewConfiguration.get(getBaseContext()).getS

灰太狼/ 2022年06月14日 07:49/ 0 赞/ 180 阅读

相关 Android动态设置ViewPager是否可手指滑动

重写onTouchEvent和onInterceptTouchEvent即可. 注意：这段代码并不是取消了滑动效果，只是拦截了滑动事件，不允许手指滑动，通过setCurre

╰+攻爆jí腚メ/ 2022年06月09日 06:29/ 0 赞/ 202 阅读

相关两列图片可滑动

做了一个只显示两列的可滑动的view，可以根据图片多少来添加宽度，反正只是显示两列。这种类似的只有两种样式，一个是单列，一个是多列。话不多说 ![watermark_

青旅半醒/ 2022年04月22日 04:04/ 0 赞/ 159 阅读

相关 ScrollView和WebView滑动的距离

ScrollView的时候：使用场景： 1. 做一些复杂动画的时候，需要动态判断当前的ScrollView是否滚动到底部或者顶部 2. ScrollView滚动到顶部或

刺骨的言语ヽ痛彻心扉/ 2022年04月16日 02:20/ 0 赞/ 311 阅读

相关 vue 缓存页面滑动的距离

-------------------- 多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) ---------

超、凢脫俗/ 2022年02月02日 00:27/ 0 赞/ 340 阅读

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

在项目中，有很多tab，用better-scroll使滑动更流畅产品要求每次被点击选中的tab都要趋向中间展示，不用better-scroll时即使设置了scrollle

﹏ヽ暗。殇╰゛Y/ 2022年01月28日 03:37/ 0 赞/ 456 阅读