// 参数 n 代表需要跳转的元素的序号,从 0 开始
function scrollX (n){
let ele = $('.tab-list').eq(n), // 当前操作元素
e_width = ele.outerWidth(), // 元素占位宽度
ul = $('.tabs'), // 父元素
w_width = ul.outerWidth(), // 父元素宽度,即滚动的框的宽度
scroll_width = ul.scrollLeft() // 滚动条卷去宽度
let _x = ele.position().left // 相对父元素偏移量,需给父元素添加定位 position
// 尾部隐藏时,需滚动距离 = 当前操作元素在父元素中偏移量 + 元素占位宽度 - 父元素宽度 + 滚动条卷去宽度
let offset_left = _x + e_width - w_width + scroll_width
if( _x > w_width-e_width){
// 尾部被遮挡
ul.animate({scrollLeft: offset_left}, 200)
}else if( _x <0){
// 头部被遮挡时,比较简单,直接控制滚动条位置为 :
// 滚动条当前位置 - 操作元素在父元素中偏移量(此时为负)
ul.animate({scrollLeft: scroll_width + _x }, 200)
}
//
// 给选中元素添加样式
//
ele.siblings().removeClass('active')
ele.addClass('active')
}