列表项切换时同步到可视区域

场景

双栏分布，左侧可滚动仓库列表，右侧为对应仓库内容，所有仓库内容项是循环数组形式，一个仓库的最后一个/第一个内容项可以根据下一组/上一组按钮切换到下一个仓库/上一个仓库的内容项，但若切换后的仓库列表项超出视口区域，无法在视口中同步显示。

需求

切换仓库时，可以同步在视口区域显示。

技术

scss 复制代码

■ Element.scrollIntoView函数。
  ● 该方法会滚动元素的父容器，使被调用该方法的元素对用户可见。
  ● 无返回值。
  ● 语法形式
    ○ scrollIntoView(alignToTop)
      ■ alignToTop为true，元素顶端和其可滚动的祖先的可视区域的顶端对齐，相当于scrollIntoViewOptions:{block:"start",inline:"nearest"}。也是默认值。
      ■ alignToTop为false，元素底部和其可滚动的祖先的可视区域的底部对齐，相当于scrollIntoViewOptions:{block:"end",inline:"nearest"}。
    ○ scrollIntoView(scrollIntoViewOptions)
      ■ scrollIntoViewOptions
        ● behavior。决定滚动是即时化石平滑设置动画。
          ○ smooth。
          ○ instant。滚动在一次跳跃中立即发生。
          ○ auto。滚动行为由滚动行为的计算值决定。
        ● block。定义可滚动祖先容器中元素的垂直对齐方式。
          ○ start。元素顶部边缘和可滚动容器的顶部对齐。默认值。
          ○ center。将元素垂直对齐到可滚动容器的中心，定位在可见区域的中间。
          ○ end。元素底部和可滚动容器底部对齐。
          ○ nearest。将元素滚动到垂直方向上最近的边。若元素更靠近可滚动容器的顶部边缘，将与顶部对齐。若更靠近底部边缘，将与底部对齐。使得滚动距离最小化。
        ● inline。定义可滚动祖先容器中元素的水平对齐方式。
          ○ start。类似，左侧。
          ○ center。
          ○ end。类似，右侧。
          ○ nearest。默认值。
■ document.querySelector。
  ● 返回文档中与指定选择器或选择器组匹配的第一个Element对象。若未找到匹配项，返回null。
    ○ 深度优先遍历，从文档标记中第一个元素开始。
■ Vue的watch。
  ● 在状态变化时执行副作用。
  ● 默认懒执行
  ● 回调触发时机
    ○ 更改响应式状态，可能会同时触发Vue组件更新和侦听器回调。
    ○ 类似组件更新，用户创建的侦听器回调函数也会被批量处理以避免重复调用。
    ○ 默认，侦听器回调会在父组件更新后、所属组件的DOM更新之前被调用。注意，侦听器回调中访问的DOM是更新前的。
      ■ 访问更新后的DOM方式
        ● nextTick。
        ● 指明flush:'post'。
■ nextTick。
  ● 将回调函数延迟到下一次DOM更新循环结束后执行。

方案

1、scrollIntoView+document.querySelector+watch

html 复制代码

        <div class="warehouse-list-show">
          <div
            v-for="(item, index) in wareHouseList"
            :key="item.idx"
            :class="[
              'warehouse-list-item',
              { 'active-warehouse-item': activeWarehoueItemIndex === item.idx },
            ]"
            @click="clickWareHouseListItem(item.idx)"
          >
            <span>{{ item.name }}</span>
          </div>
        </div>

javascript 复制代码

const activeWarehoueItemIndex = ref(0);
watch(
  activeWarehoueItemIndex,
  (newWarehouseItemIndex) => {
    const itemEle = document.querySelector(".active-warehouse-item");
    if (itemEle) {
      console.log(itemEle);
      itemEle.scrollIntoView({ behavior: "smooth", block: "nearest" });
    }
  },
  { flush: "post" }
);

参考资料

bash 复制代码

■ https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
■ https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
■ https://cn.vuejs.org/guide/essentials/watchers