tab列表横向滚动时点击居中原理

goCenter(e) {
  // 横向滑动居中
  let ul = document.querySelector('#topNavUl');
  let nav = document.getElementById("topNav");
  let window_offsetWidth = window.innerWidth; //屏幕宽度;
  let dom = e.target;
  if (dom) {
	let domoffsetWidth = dom.offsetLeft,
	  //中间值 =( 屏幕宽度 - li宽度 ) / 2;
	  diffWidth = (window_offsetWidth - dom.offsetWidth) / 2,
	  //目标值 = offset - 中间值
	  targetOffset = -(domoffsetWidth - diffWidth);
	let ul_width = ul.getBoundingClientRect().width;//开始
	
	// 未超出中间值
	if (-targetOffset < 0) {
	  nav.scrollLeft = 0;
	  return;
	}
	//末尾
	if(targetOffset <  window_offsetWidth - ul_width ){
	  nav.scrollLeft = -(window_offsetWidth - ul_width);
	  return;
	}       
	//正常
	nav.scrollLeft = -targetOffset
  } 
},

1、目标li距离左边容器的距离，容器的实际宽度

2、中间值 = （屏幕宽度 - 单个li的宽度）/ 2；

3、目标值滚动条距离 = 目标li距离左边容器的距离 - 中间值 ；

4、边界设定：目标值滚动条距离 < 0 ：滚动条距离设置为0   边界设定

5、边界设定：目标值滚动条距离 > 最大滚动条的距离（容器的实际宽度-屏幕宽度） ：滚动条距离设置为 容器的实际宽度-屏幕宽度

6、滚动条的距离 = 目标值滚动条距离