场景解决-列表项切换时同步到可视区域

场景

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

需求

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

技术

■ 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更新循环结束后执行。

方案

■ scrollIntoView+document.querySelector+watch

        <div class="warehouse-list-show"><divv-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>

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" }
);

参考资料

■ 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