页面滚动条定位到指定位置

dy1717

于 2024-08-20 16:39:34 发布

阅读量247

点赞数 1

分类专栏： JavaScript Vue 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/dy1717/article/details/141362078

版权

JavaScript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Vue

13 篇文章 0 订阅

订阅专栏

需求：页面数据保存时，如页面必填区域存在未填写的部分，滚动条定位到相对应区域，提示输入

前提：我写的是带锚点的定位，所以滚动跳转是定位到某个对应的锚点位置上的

点击保存按钮的时候，根据template里面写的锚点id 去跳转

      <div class="navigation">
        <p style="font-size: 16px">车型目录</p>
        <ul>
          <li v-for="(item, index) in navigationList" :key="index" class="navigationList" @click="roll(item.id)">
            <a>{{ item.name }}</a>
          </li>
        </ul>
      </div>


 navigationList: [
        {
          name: '车型基础信息',
          id: 'carmodelInfo'
        },
        {
          name: '项目体制',
          id: 'projectSystem'
        }
      ],

//保存事件
save(){
     
     // 调用检查函数,checkFormCompleteness是校验必填项是否填写完整
const baseInfo = ['','',''] // 这个是表单存在必填项的prop
      const isFormComplete = this.checkFormCompleteness(baseInfo, this.ruleForm)
      if (isFormComplete == false) {
        this.roll('carmodelInfo')
        return this.$message.warning(`请检查未填写的车型基础信息`)
      }
   
 },
//表单校验
 checkFormCompleteness(baseInfo, ruleForm) {
      for (const field of baseInfo) {
        if (Array.isArray(ruleForm[field])) {
          if (ruleForm[field].length === 0) {
            return false // 如果是数组且长度为0，则返回false
          }
        } else {
          if (!ruleForm[field]) {
            return false // 如果不是数组且值不存在，则返回false
          }
        }
      }
      return true // 所有字段都有值或者数组长度大于0，则返回true
    },
//跳转，这个id传递的就是锚点绑定的id
   roll(id) {
      let node = this.$el.querySelector('#' + id)
      if (node.offsetTop === 0) {
        node = node.offsetParent
      }
      const scrollEl = this.$refs.scrollRef.$el.querySelector('.el-scrollbar__wrap')
      // scrollEl.scrollTop = node.offsetTop
      scrollEl.scroll({ top: node.offsetTop, behavior: 'smooth' })
      // node.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' })
    },