Vue3 设置点击后滚动条移动到固定的位置

需求：
点击不通过按钮，显示红框中表单，且滚动条滚动到底部 （显示红框中表单默认不显示）

<el-button @click="onApprovalPass">不通过</el-button>
<div class="item" v-if="approvalPassShow">
      红框中表单内容缩减版
</div>
<div  ref="footerListRef">
    <el-button type="primary" >提交</el-button>
    //滚动条移动到这个位置
</div>
<script setup>
const approvalPassShow = ref(false)
const footerListRef = ref(null);
const onApprovalPass = () => {
    
    
  approvalPassShow.value = true
  setTimeout(() => {
    
    
  // 移动滚动条
    footerListRef.value.scrollIntoView({
    
     block: "start", behavior: "smooth" });
  }, 50);
};
</script>