点击按钮 滚动条滑动到某个位置

vue界面:

<el-tabs v-model="active" @tab-click="jumpTitle">
  <el-tab-pane v-for="(item, index) in steps"
               :key="index" :label="item" :name="item"></el-tab-pane>
</el-tabs>(steps里是各个按钮的名字,只有一个按钮的话,可以传id或ref注册的名字到方法中)
<el-card ref="leftNewsDiv" @scroll.native="handleScroll" class="reviewLDCardStyle" :body-style="{ height:'92% ',}" >
  <p class="mianDFont"><img :src="imgurl" class="imgDStyle">1</p>
  <p class="mianDFont"><img :src="imgurl" class="imgDStyle">基本情况</p>
</el-card>

js方法

//根据按钮的不同,跳转到不同的位置

jumpTitle() {
  let nodeList = document.querySelectorAll('.mianDFont');
  let index = this.steps.indexOf(this.active);
  let element = nodeList[index];
  let material = this.$refs.leftNewsDiv.$el;($el是挂载到实际dom上,没有$el则是虚拟dom)
  const scrollTop =element.offsetTop;
//父元素一定要有定位,定位可以是relative,或者resolution,会根据最近的有定位的父元素来计算,若没有定位,就是相对于body的位置
  material.scrollTo({
    top: scrollTop,
    behavior: 'smooth' // 平滑滚动
  });

},
//根据滚动事件,改变tab选中的名字
handleScroll() {
  let nodeList = document.querySelectorAll('.mianDFont');
  nodeList.forEach((item, index) => {
    //获取滚动的高度,加上标题的高度(方便能正好定位到标题)
    let scrollTop = this.$refs.leftNewsDiv.$el.scrollTop;
    if (scrollTop >= item.offsetTop) {
      this.active = this.steps[index];
    }
  })
}

猜你喜欢

转载自blog.csdn.net/qq_39692513/article/details/93719421