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

场景

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

需求

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

技术

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
相关推荐
mustfeng4 分钟前
VCS & Verdi 2023安装
java·服务器·前端
Mintopia24 分钟前
🌐 数据合规框架下的 WebAIGC 训练数据处理技术规范
前端·javascript·aigc
骥龙43 分钟前
2.6、Web漏洞挖掘实战(下):XSS、文件上传与逻辑漏洞深度解析
前端·xss
用户433845375691 小时前
Promise深度解析,以及简易版的手写实现
前端
梦之云1 小时前
state 状态相关
前端
梦之云1 小时前
effect 副作用相关
前端
golang学习记1 小时前
从0死磕全栈之Next.js 生产环境优化最佳实践
前端
Mintopia1 小时前
🧠 Next.js 还是 Nuxt.js?——当 JavaScript 碰上命运的分叉路
前端·后端·全栈
5pace2 小时前
Mac Nginx安装、启动、简单命令(苍穹外卖、黑马点评前端环境搭建)
java·前端·nginx·macos·tomcat
Learn Beyond Limits2 小时前
如何在Mac进行Safari网页长截图?
前端·macos·safari·方法·操作·功能·开发者平台