taro将页面滚动到指定位置_taro.pagescrollto

背景

实现点击一个按钮可以滚动到当前页面的指定位置。

问题

首先想到使用taro自己的api （pageScrollTo）实现滚动，查看文档发现selector 参数刚好是自己需要的。（https://taro-docs.jd.com/taro/docs/2.x/apis/ui/scroll/pageScrollTo）

然后就写了一个简单的函数

function scrollIntoView (id) {
  Taro.pageScrollTo({
      selector: '#id',
  })
}
1
2
3
4
5

但是调用之后报错

errMsg: "pageScrollTo:fail "scrollTop" is required"
1

难道scrollTop是必填的？？？使用scrollTop参数确实可以实现滚动，但是我滚动的距离不确定。

然后查看源码发现api中根本就没有selector 参数，这是什么鬼？看了一下版本当前使用的就是2.x的

微信里面也有pageScrollTo方法但是h5中使用这个方法会有问题，还是使用其他方法去实现吧。

实现

看了一下scrollView组件里面scrollIntoView可以实现相同的效果

function scrollIntoView (id) {
  document.querySelector(`#${id}`).scrollIntoView({
    behavior: 'smooth',
    block: 'center',
    inline: 'start'
  })
}
1
2
3
4
5
6
7