这里如果点击navigation显示以外的目录，滚动条不会自动滚到那里

Question

比如这里选择电影/图书。黑色滑块就直接消失了，滚动条也没有相应移动到电影/图书的位置

Answer 1

快乐源泉 2023-01-25 21:50:58

添加下实现功能的代码片段（仅供参考）

...
// watch 监听
watch(currentCategoryIndex, (val) => {
    const { left, width } = itemRefs[val].getBoundingClientRect()
    sliderStyle.value = {
        // 滑块的位置 = ul 横向滚动未知 + 当前元数的 left
        transform: `translateX(${ulScrollLeft.value + left - 10}px)`,
        width: width + 'px'
    }
    
    // 不在可视区，修改 ulTarget scrollLeft 值
    if (!isInViewPort(itemRefs[val])) {
        const list = itemRefs.slice(0, val)
        const ulTargetScollLeft = list.reduce(
            (sum, item) => sum + item.getBoundingClientRect().width,
            0
        )
    
        ulTarget.value.scrollLeft = ulTargetScollLeft
    }
})

// 判断元素是否在可视区
const isInViewPort = (el) => {
    const viewWidth = window.innerWidth || document.documentElement.clientWidth
    const viewHeight = window.innerHeight || document.documentElement.clientHeight
    const { top, right, bottom, left } = el.getBoundingClientRect()
    return top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight
}
...

Answer 2

coolpi21 2022-06-04 21:37:31

添加下实现功能的代码片段（仅供参考）

// 获取navigator scrollLeft值
const getScrollLeft = (index, eleList) => {
  const list = eleList.slice(0, index)
  return list.reduce((pv, cv) => pv + cv.getBoundingClientRect().width, 0)
}

// 滑块的transform值
sliderStyle.value = {
    transform: `translateX(${getScrollLeft(val, itemRefs)}px)`,
    ...
}
// 设置scrollLeft值
...
ulTarget.value.scrollLeft = getScrollLeft(index, itemRefs)

// ul添加class属性
class="... scroll-smooth"

Answer 3

Sunday 2022-05-18 19:06:22

你好

这是一个定位的业务问题。如果要实现这个功能，则需要控制横向 scroll 的滚动。

可以根据 选中的 item 坐标，来控制  ref="ulTarget" 的横向 scroll 的方式来进行实现。

• 提问者 曹学习 #1

  那这个应该如何实现诶，百度了一圈都没人说到点子上

• Sunday 回复 提问者 曹学习 #2

  1. 拿到点击的 item 所在的 index 坐标。 2. 根据坐标计算出改坐标元素 left 距离。 3. 让 ul 滚动对应的横向 scroll 。 即可。

• 提问者 曹学习 回复 Sunday #3

  老师可以在后面的课上提一下吗？我百度了好久都没找到应该怎么做

点开查看后面4条评论