JQUERY 实现TAB滚动居中滑动效果。

效果图

<style>
/***滚动TAB***/
.tabsc{ background:#fff; position: relative; white-space: nowrap; overflow:auto hidden; border-bottom:1px solid #f2f2f2; height:0.8rem; }
::-webkit-scrollbar{ width: 0;height: 0; color: transparent;}
.tabsc li{ display: inline-block; line-height:0.8rem; padding:0 0.18rem; font-size:0.3rem;}
.tabsc li.on{ color:#2979FF}
.tabsc .sline{ height:0.04rem; width:0.4rem; border-radius:0.1rem; position:absolute; bottom:0; left:0; background:#2979FF}
</style>
<ul class="tabsc" id="tabScroll">
    <li class="on">婚嫁家庭</li>
	<li>婚嫁家庭</li>
	<li>婚嫁家庭</li>
	<li>婚嫁家庭</li>
	<li>婚嫁家庭</li>
	<li>婚嫁家庭</li>
	<li>婚嫁家庭</li>
	<li>婚嫁家庭</li>
	<li>婚嫁家庭</li>
	<li>婚嫁家庭</li>
	<li>婚嫁家庭</li>
	<li>婚嫁家庭</li>
	<li>婚嫁家庭</li>
	<li>婚嫁家庭</li>
	<li>婚嫁家庭</li>
	<li>婚嫁家庭</li>
	<li>婚嫁家庭</li>							
	<span class="sline"></span>
</ul>
<script>
//TAB滚动居中
function tabScroll(id){
	let dom = $(id);
	let line = dom.find(".sline");
	let li0w = dom.find("li:first").innerWidth();
	line.css("left",(li0w-line.width())/2)
	dom.find("li").click(function(){
		 var moveLeft = $(this).position().left+$(this).parent().scrollLeft();
		 var winW = document.documentElement.clientWidth;
		 var thisWidth = $(this).innerWidth();
		 var left = moveLeft-(winW/2)+(thisWidth/2);
		 dom.animate({scrollLeft:left+'px'},300);
		 var index = $(this).index();
		 var left2 = (thisWidth-line.width()) / 2 + moveLeft
		 line.animate({left:left2+'px'},300)
		 $(this).addClass("on").siblings().removeClass("on")
	})
}
tabScroll('#tabScroll')
</script>