如何使用
引入
CDN
你可以使用支持Github回源的CDN
jsDelivr:
自行部署
点击下载文件
引入:
使用
LSP配置了JSDoc，你可以方便的用VSCode、IDEA等代码编辑器查看其使用方法
注：每个页面的长度 = scroll-page总长度 / 页面数量，需要手动设置scroll-page总长度，一般使用vh单位
文档中长度是显示此页面的范围，高度是页面div的高度，一般为100vh
自动操作
这种状态不能使用lsp.addEventListener监听，如需监听请手动操作
手动操作
const lsp = new ScrollPage(".scrollPage");// 初始化lsp对象, 需要传入目标的CSS选择器或者element对象
lsp.addEventListener((event) => {// 创建监听事件
// event对象
// 在滚动动画范围内
/*
pageNum: 当前页码
pageHeight: 当前页长度
pageToTop: 当前页距离顶端（相对于页面长度）
scrollPage: 当前页距离顶端（相对于整个动画盒子的长度）
element: 动画盒子的元素对象
page: 当前页的元素对象
*/
// 超出范围时
/*
without: up/down 分别为从上端超出和从下端超出
*/
})
效果
完整效果https://www.oblivionocean.top/
评论