利用jq实现横向tab分类切换自动居中

有时候Tab条目多的时候 一屏展示不完，此时需要一个切换的时候让tab分类自动居中

<div class="h5ui-tab h5ui-tab2">

 <ul class="tab-item">
      <li id="arts1" class="active">
        <a href="#arts-1">最新</a>
      </li>
      <li id="arts2">
        <a href="#arts-2">成人保险</a>
      </li>
      <li id="arts3">
        <a href="#arts-3">儿童保险</a>
      </li>
      <li id="arts4">
        <a href="#arts-4">老人保险</a>
      </li>
      <li id="arts5">
        <a href="#arts-5">方案设计</a>
      </li>
      <li id="arts6">
        <a href="#arts-6">防坑指南</a>
      </li>
    </ul>
</div>

 

这里需要3个必要的值

$('.tab-item').on('click', 'li', function (e) {
    // 设备宽度
    let clientWidth = document.body.clientWidth / 2;
    // 节点距离左边距
    let offset_left = e.currentTarget.offsetLeft;
    // li宽度
    let li_width = e.currentTarget.clientWidth / 2;

    $('.h5ui-tab2').animate({
      scrollLeft: offset_left + li_width - clientWidth,
    });
    // if(offset_left)
  });