容器中子元素点击滚动居中

效果截图：

 HTML：

<div class="type">
    <div class="type-wrapper">
         <div class="type-slide"><div class="img">专</div></div>
         <div class="type-slide"><div class="img">中</div></div>
         <div class="type-slide"><div class="img">汉</div></div>
         <div class="type-slide"><div class="img">书</div></div>
         <div class="type-slide active"><div class="img">字</div></div>
         <div class="type-slide"><div class="img">临</div></div>
         <div class="type-slide"><div class="img">3D</div></div>
    </div>
</div>

 JS：

//点击滚动居中
$('.index02 .type-slide').click(function(){
     let target = $(this);
     let scrollDom = $('.index02 .type-wrapper');
     //滚动距离 = 目标左边距 + 目标一半宽度 + 容器当前已滚动距离 - 容器一半宽度 - 容器左侧边距
     let left = target.offset().left + target.width() / 2 + scrollDom.scrollLeft() - scrollDom.width() / 2 - scrollDom.offset().left;
     scrollDom.animate({scrollLeft:left},300)
})