vue如何实现滑动到指定位置

在Vue中，有三种方式可以实现H5页面滑动至指定位置

方法1：

1. //先获取目标位置距离

2. mounted() {

3. this.$nextTick(() => {

4. setTimeout(() => {

5. let targetbox= document.getElementById('targetbox');

6. this.target= targetbox.offsetTop;

7. })

8. })

9. }

10. //再滑动指定距离

11. document.body.scrollTop = this.target;

方法2：

1. this.$nextTick(() => {

2. this.$refs.DOM.scrollTo(0,200);

3. })

方法3：

document.getElementById("target").scrollIntoView();

 

避坑指南：

方法1，滑动至的元素不能是display:none，存在兼容问题，亲测在部分ios机子上document.body.scrollTop滑动无效。

方法2，未亲测过，但在this.$nextTick(()里执行滑动，感觉有点麻烦。

方法3，亲测可用，ios和android都可。只是要注意，如果页面有监听scroll事件，scrollIntoView也会触发scroll事件的。