横向滚动到指定内容
// 参数 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') }