美文网首页
动态设置ref元素到达顶部的距离

动态设置ref元素到达顶部的距离

作者: 陈桑 | 来源:发表于2022-05-11 16:28 被阅读0次

    示例:


    demo.gif

    我的切换点:

    <div class="disease_tab_box">
        <div v-for="(item, index) in datalist" :key="index" @click="tabChange(index)">{{item}}</div>
    </div>
    

    我的内容块:

    <div :ref="'name_ref' + index" v-for="(name, index) in datalist" :key="inex">{{name}}</div>
    

    我的事件:

       tabChange(index) {
          window.scrollTo({
            top: this.$refs['name_ref' + index][0].getBoundingClientRect().top + window.scrollY-70,
            behavior: 'smooth' // 平滑滚动
          })
        },
    

    vue项目中用到,特此记录 2020-05-12

    相关文章

      网友评论

          本文标题:动态设置ref元素到达顶部的距离

          本文链接:https://www.haomeiwen.com/subject/vqxeurtx.html