应用场景

实现如下效果时候遇到

zepto的animate()源码采用css3的方式进行，width的变化是可以用的，而scrollLeft属性不在css3的动画属性中,所以不能用

zepto的animate源码

解决方式一

  //解决zepto不支持 非css3 实现的animate动画的办法
  $.fn.scrollL = function (options) {
    var defaults = {
      toLeft: 0,    //滚动目标位置
      durTime: 500,  //过渡动画时间
      delay: 30,     //定时器时间
      callback: null   //回调函数
    };
    var opts = $.extend(defaults, options),
      timer = null,
      _this = this,
      curLeft = _this.scrollLeft(),//滚动条当前的位置
      subTop = opts.toLeft - curLeft,    //滚动条目标位置和当前位置的差值
      index = 0,
      dur = Math.round(opts.durTime / opts.delay),
      smoothScroll = function (t) {
        index++;
        var per = Math.round(subTop / dur);
        if (index >= dur) {
          _this.scrollLeft(t);
          window.clearInterval(timer);
          if (opts.callback && typeof opts.callback == 'function') {
            opts.callback();
          }
          return;
        } else {
          _this.scrollLeft(curLeft + index * per);
        }
      };
    timer = window.setInterval(function () {
      smoothScroll(opts.toLeft);
    }, opts.delay);
    return _this;
  };

调用方式

$('#target').scrollL.({toLeft: tabBoxNewScrollLeft, durTime: 200})

解决方式二 封装为AMD模块

//scrollLeft.js
/**
 *@desc 解解决zepto不支持 非css3 实现的animate动画的办法 例如 scrollLeft
 *@author qianxuemin001
 *@date 2018/06/28 18:19:02
 */
define(function () {
  /**
   * @method scrollL scrollLeft动画效果
   * @param { Object } target 需要改变scrollLeft的Dom对象
   * @param { Object } options 动画效果配置
   * @return { Object } 返回值Dom元素本身
   * @example
   * ```javascript
   * scrollL($('#target'),{toLeft: 500, durTime: 200})
   * ```
   */
  var scrollL = function (target, options) {
    var defaults = {
      toLeft: 0,    // 滚动目标位置
      durTime: 500,  // 过渡动画时间
      delay: 30,     // 定时器时间
      callback: null   // 回调函数
    };
    var opts = $.extend(defaults, options),
      timer = null,
      _this = target,
      curLeft = _this.scrollLeft(),// 滚动条当前的位置
      subLeft = opts.toLeft - curLeft,    // 滚动条目标位置和当前位置的差值
      index = 0,
      dur = Math.round(opts.durTime / opts.delay),
      smoothScroll = function (t) {
        index++;
        var per = Math.round(subLeft / dur);
        if (index >= dur) {
          _this.scrollLeft(t);
          window.clearInterval(timer);
          if (opts.callback && typeof opts.callback == 'function') {
            opts.callback();
          }
          return;
        } else {
          _this.scrollLeft(curLeft + index * per);
        }
      };
    timer = window.setInterval(function () {
      smoothScroll(opts.toLeft);
    }, opts.delay);
    return _this;
  }

  return {
    scrollL: scrollL
  }
})

使用方式

    var scrollLAnimate = require('util/scrollLeft')

    $('.wrapper').on('click','.tab-item',function () {
      // 点击tab滚动效果
      var tabBox = $(this).closest('div.nav-list-inner')
      var tabBoxOriginScrollLeft = tabBox.scrollLeft()
      var tabBoxNewScrollLeft = 0
      var halfScreenWidth = $(window).width() / 2
      var tabItemRect = $(this).offset()
      var isScroll = tabItemRect.left + tabItemRect.width / 2 + tabBoxOriginScrollLeft > halfScreenWidth
      if (isScroll) {
        var distance = tabItemRect.left + tabItemRect.width / 2 - halfScreenWidth
        tabBoxNewScrollLeft = tabBoxOriginScrollLeft + distance
      }
      // tabBox.scrollLeft(tabBoxNewScrollLeft)
      scrollLAnimate.scrollL(tabBox, {toLeft: tabBoxNewScrollLeft, durTime: 200})
})

补充 滚动条部分的处理

横向滚动条隐藏方式 通过伪类遮住

.nav-list-inner {
            overflow-x: auto;
            width: 100%;
            height: px2rem(50);
            padding-left: px2rem(24);
            background: #fff;
            -webkit-overflow-scrolling: touch;
            /*&::-webkit-scrollbar {//滚动条整体样式
                width: 0px;     //高宽分别对应横竖滚动条的尺寸
                height: 0px;
              }*/
    //上面的方式存在兼容问题 通过下面的方式实现
          &:after{
            content ''
            position absolute
            left: 0
            bottom 0
            width 100%
            height px2rem(8)
            background #fff
          }
        }