scroll-switch

简单来说，它就是用来滚动切换列表项的。 项目地址

适用场景

当某些列表页希望用户每次只聚焦于单个列表项，但又不是每个列表项都是占满屏幕时就不太适合使用全屏滚动方案了。

所以，可以在保留原有滚动查看的基础上再增加一个上下切换的功能，仅作为滚动查看的辅助工具而存在看起来就可以很好的满足该种需求。

安装

npm install scroll-switch

特性

• next、pre 会根据当前列表滚动位置智能切换到最符合用户直觉的条目
• 相对于 scrollIntoView 支持设置 offset，可以更好的控制滚动目标位置

API

constructor(options: ScrollSwitchOptions)

构造函数

const scrollSwitch = new ScrollSwitch({
  itemSelector: '.item', // 必填，列表条目的 css 选择器。
  offset: 10, // 可选，条目滚动至目标位置的偏移像素。
  mode: 'vertical', // 可选，默认值：vertical。横向：horizontal；纵向：vertical。
  behavior: 'smooth', // 可选，默认值：smooth。滚动特性配置，同 window.scrollTo 的 behavior。
})

next()

滚动至下一个条目。返回值：是否切换

pre()

滚动至上一个条目。返回值：是否切换

goto(item: Element)

滚动至指定条目

getCurrentStatus()

获取列表当前的滚动状态。返回值：

const {
  items,
  firstVisibleItem: {
    index, // 当前首个处于可视区域的条目索引
    rect, // 当前首个处于可视区域的条目的 boundingClientRect
  },
} = scrollSwitch.getCurrentStatus()