移动端Vue3单页应用scrollTop无效的问题scrollTop可以用来判断页面当前滑动的位置，可以根据这个值实现滑

scrollTop可以用来判断页面当前滑动的位置，可以根据这个值实现滑动页面到特定位置时展示某些内容；或者通过设定这个值让页面滑动话指定位置。通常通过下面的方式获取这个值。

let scrollTop =
   window.pageYOffset ||
   document.documentElement.scrollTop ||
   document.body.scrollTop;

但是在开发移动端Vue项目的时候，经常出现获取到的scrollTop值为0的情况。事实上，从上面的获取方式可以看出，我们是在获取body或者document的滑动距离，但是一般的单页应用都是固定一个头部或者脚部，中间的元素（路由出口）才是真正的页面。这就导致了滑动的其实不是body或者document，而是一个元素，一个div，自然不能用上面的方法获取到scrollTop。

所以我们可以曲线救国。

曲线救国一：获取页面滑动距离

假设页面的滑动部分类名是page

// layout.vue

<header></header>
<router-view class="page"></router-view>
<footer></footer>

// test.vue
<script>
let page = document.getElementsByClassName('page')[0]
let scrollTop = page.getBoundingClientRect().top * -1
</script>

需要注意的是，通过getBoundingClientRect()获取的值是负的

曲线救国二：让页面滚动到指定位置

let page = document.getElementsByClassName('page')[0]
page.scrollIntoView()

// 动画效果
page.scrollIntoView({ behavior: 'smooth' })