横向滚动到指定内容

// 参数 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')
  }

 

posted @ 2019-09-29 19:45  绿谷  阅读(824)  评论(0编辑  收藏  举报