关于在弹出框中做点击按钮定位至某一位置的功能

今天做了一个功能，在弹出框中做一个点击上面的标签按钮可以定位到下面的位置

上图

 

 <el-select
      style="width: 100px"
      v-model="data.cname"
      popper-class="selectStyle"
      size="small"
      placeholder="请选择"
    >
      <div style="height:70px">
        <el-input v-model="input" size="mini" placeholder="请输入内容" />
        <!--循环遍历下拉框中的按钮-->
        <el-button v-for="(it,i) in selectData" :key="i" @click="jumpClick('#group'+i)" size="mini">{{it.label}}</el-button>
      </div>

      <div  style="overflow: auto;height: 340px">
        <el-option-group
          v-for="(group,index) in selectData"
          :id="'group'+index"   // 给位置放id
          :key="group.label"
          :label="group.label"
        >
          <el-option
            v-for="item in group.options"
            :key="item.id"
            :label="item.cname"
            :value="item.id"
          />

        </el-option-group>
      </div>

    </el-select>

数据格式参考elementui的select

 searchDom(){
      let dom
      // 循环获取所有的弹框
      for (let j = 0; j <document.querySelectorAll('.selectStyle').length ; j++) {
        // 获取所有的style  getComputedStyle()这个方法可以获取dom元素的所有样式，具体用法可以百度一下
        var divclass= getComputedStyle(document.querySelectorAll('.selectStyle')[j])
        // 寻找显示的那个弹框
        if(divclass.display=='block'){
          dom = document.querySelectorAll('.selectStyle')[j]
        }
      }
      return dom
    },
    // 点击跳转至当前锚点
    jumpClick(i){

      let dom
      dom = this.searchDom()
      // 在弹框的dom中寻找id
      dom.querySelector(i).scrollIntoView(true)
    },

因为弹出框是在dom结构外，body结构内的，而且每打开一个弹框都会在body增加一个dom,

所以主要问题是如何获取显示弹框的dom,一开始走了弯路，想要在dom树种删除dom,结果失败了，因为没法保证删除时机，

后来思考寻找这每个弹出框dom的不同点，

显示的弹框的dom样式上的display为block,隐藏的为none，所以以这个为突破口。获取所有的弹出框(这边给弹出框加上了自定义类名)。

然后遍历获取每个弹出框的样式，并判断它的display样式是否为block(显示)，

如果为(block)显示则就是我们要找的弹出框，然后在获取弹框内的做标记的id的dom，最后再用 scrollIntoView(true)滚动过去