Vue3中点击按钮滚动页面到低端

案例

<div ref="logContainer></div>


const logContainer = ref(null);
const onStepChange = () =>{
    logContainer.value.scrollIntoView({
        behavior: "smooth", // 定义过渡动画 instant立刻跳过去 smooth平滑过渡过去
        block: "start", // 定义垂直滚动方向的对齐 start顶部（尽可能）  center中间（尽可能）  end（底部）
        inline: "center", // 定义水平滚动方向的对齐
    });
};

核心代码

<template>
  <div ref="editflagNode"></div>
  <div v-if="route.query.flag === '1' || route.query.flag === '3'">
      <Title v-if="btnFlag || taskDetail.taskConclusion !== null">{{
        route.query.flag === "3" ? "研判结论" : "添加研判结论"
        }}</Title>

      <div style="margin: 10px">
        <div style="margin: 10px">{{ taskDetail.taskConclusion }}</div>
        <div style="width: 100%; display: flex">
          <div
              class="onupload"
              v-for="val in taskDetail.conclusionAttachment"
              :key="val.id"
          >
            <div>{{ val.name }}</div>
            <div>
              <a :href="val.address" :download="val.name">下载</a>
              <!-- 输入框 -->
            </div>
          </div>
          <Textareas @datalist="datalist" empty="1" v-if="btnFlag"
          >提交
          </Textareas
          >
        </div>
      </div>
    </div>
  </div>
</template>

const editflagNode = ref(null);
const containerNode = ref(null);
// 模拟滚动
const scrollToEditflag = (domNode, height) => {
  for (let i = 0; i < height + 1000; i++) {
    setTimeout(() => {
      domNode.value.scrollTo(0, i);
    }, 100);
  }
};

onMounted(async () => {
  console.log("123", 123);
  mitt.on("triggerScrollToEditflag", (flag) => {
    scrollToEditflag(containerNode, editflagNode.value.offsetTop);
    btnFlag.value = flag;
  });
  getResearchTaskDetail();
});