实现将元素滚动到用户可见位置

一、移动端

【需求】移动端当用户收到消息时，点击消息可以跳转到列表中消息所在的位置，如下图

【实现思路】 当消息6跳转时，路由携带id到列表页（前提是消息6与消息6详情有相同的id）。通过id使得消息6与其详情做匹配，在详情页通过getBoundingClientRect()方法,获取消息6详情的位置后，并通过DOM元素的scrollTo方法使页面滚动到该位置。

【实现代码】

一、消息6跳转时路由携带id

 this.$router.push({
        path: '/messDetail',
        query: {
          messId:6
        }
      })

二、消息详情页列表，滚动到消息6详情所在的位置

<template>
<div ref="rootBox" >
<div class='messList' >
<div 
class='messItem' 
v-for="(item, index) in messList"
            :key="index"
            :ref="item.messId"
>
  // 消息详情的内容 
</div>
</div>
</div>
</template>

<script>
export default {
created(){
// 获取消息6的id
this.curActivityId = this.$route.query.messId
},
 data () {
curActivityId:'',
messList:[
{messId:1},
{messId:2},
{messId:3},
{messId:4},
{messId:5},
{messId:6},
]
},
methods:{
// 异步获取消息详情列表后,写入
 this.$nextTick(() => {
            // 拿到根标签DOM
            let rootBox = this.$refs.rootBox
               // 获取消息6详情所在的位置
            let contentTop = this.$refs[
              this.curActivityId
            ][0].$el.getBoundingClientRect().top
            // 根标签滚动到消息6详情所在的位置
             rootBox.scrollTo({
              top: contentTop - 150,
              behavior: 'smooth'
            })
            this.curActivityId = ''
          })

}

}
</script>

 【知识点】getBoundingClientRect()方法，

getBoundingClientRect()获取元素位置，这个方法没有参数 

getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
getBoundingClientRect()是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。

getBoundingClientRect()方法分析，可查看原文链接：https://blog.csdn.net/qq_26642611/article/details/104846032

二、PC端

【PC端element-ui表格实现定位到某行】

详见原文:element-ui表格定位到某一行 - yuwenjing - 博客园

原文补充：scrollTop如果出现为0的情况，需检查是否对实际产生滚动的元素使用scrollTop，只有对真正产生滚动条的元素使用scrollTop才有效。

【优化】

        其实通过getBoundingClientRect()+scrollTop实现定位的方法，完全可以用scrollIntoView()方法实现。

      元素的scrollIntoView()方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见。

        通过scrollIntoView()方法的定义，可知，该方法直接可以将定位的元素滚到对用户可见，亲测有效，目前该方法是否适用于微服务暂时未亲测，待有结果后更新文章。

三、注意事项

以上代码需要写在$nexttick中