滚动相关API

• 3个滚动API

  1. Element.scroll({top?: number, left?: number, behaviour?: 'smooth' | 'instant' | 'auto'})
  2. Element.scrollTo({top?: number, left?: number, behaviour?: 'smooth' | 'instant' | 'auto'})
  3. Element.scrollBy({top?: number, left?: number, behaviour?: 'smooth' | 'instant' | 'auto'})

• 参数解释

  • top和left是可选的，接受一个number类型的数字，并且它的单位是px。
  • behaviour: 'smooth' | 'instant' | 'auto'。behaviour属性用于指定如何滑动，'smooth'表示平滑滚动，'instant'和'auto'表示瞬间滚动。

• 相关区别

  1. Element.scroll({left: 200})表示滚动条滚动到y轴200px处。（Element.scrollTo()和Element.scroll表现一致）。

     Element.scroll()多次调用只有第一次会生效，因为它实际上是滚动到指定的坐标点处。

  2. Element.scrollBy({left: 200})表示滚动条在y轴方向上滚动200px。

     Element.scrollBy()多次调用均会生效，因为它实际上是基于当前坐标点继续向指定方向滚动指定距离。

• 使用场景

  1. Element.scroll()和Element.scrollTo()由于是滚动到指定坐标处，因此适合滚动到页面上某一个固定点的场景。
  2. Element.scrollBy()由于是向在当前坐标点的基础上指定方向滚动指定距离，因此适合向下一页滚动的场景（如，一个权益列表被分成了多个页，每个页之间通过滚动切换）。