scrollspy-lib
v1.0.0
Published
Building ScrollSpy Lib
Downloads
3
Readme
[![Forks][forks-shield]][forks-url] [![Stargazers][stars-shield]][stars-url] [![Issues][issues-shield]][issues-url] [![MIT License][license-shield]][license-url]
ScrollSpy-Lib
ScrollSpy-Lib:滚动检测 原生js版本的scrollspy,滚动到视口内自动触发动画,以及监听进入视口/离开视口的事件自定义回调处理。
浏览器支持
| | | | --- | --- | --- | --- | --- IE 9+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔
npm 安装
$ npm install scrollspy-lib --save
如何使用
ScrollSpy(document.querySelector('#demo'))
ScrollSpy接收2个参数
| 接收参数 | 描述 | 参考 | 默认值 | | -------- | --------------------- | ------------------------------- | :----------------------------------------------------------- | | element | html元素 *必须 | document.querySelector('#demo') | 无 | | options | 动画执行配置项 非必须 | {animation: 'fade'} | { animation: 'fade', // 执行动画名称(需要css定义) repeat: true, // 是否重复动画 delay: 0, // 延迟时长(毫秒) topOffset: 0, // 距离上偏移量 leftOffset: 0// 距离左偏移量} |
Examples
html 引用
<!-- 配置参数参考上图 -->
<div class="demo" data-scrollspy="{animation:'fade'}">我会fadeIn 显示出来哟</div>
<div class="demo" data-scrollspy="{animation:'scale-up'}">我会Scale-up 显示出来哟</div>
<div class="demo" data-scrollspy="{animation:'scale-down'}">我会Scale-down 显示出来哟</div>
<div class="demo" data-scrollspy="{animation:'slide-top'}">我会Slide Top 显示出来哟</div>
<div class="demo" data-scrollspy="{animation:'slide-bottom'}">我会Slide Bottom 显示出来哟</div>
<div class="demo" data-scrollspy="{animation:'slide-right'}">我会Slide Right 显示出来哟</div>
<div class="demo" data-scrollspy="{animation:'slide-left'}">我会Slide Left 显示出来哟</div>
<div class="demo" data-scrollspy="{animation:'fade', delay: 300}">Fade delay: 300</div>
<div class="demo" data-scrollspy="{animation:'fade', delay: 600}">Fade delay: 600</div>
<div class="demo" data-scrollspy="{animation:'fade', delay: 900}">Fade delay: 900</div>
<div class="demo" data-scrollspy="{animation:'fade', repeat: false}">我只会显示一次动画</div>
js 引用
ScrollSpy(document.querySelector('XXX'), options)
来初始化
inview.scrollspy 元素进入窗口可视区域时触发 outview.scrollspy 元素离开窗口可视区域时触发
const demo = document.querySelector('#my-scrollspy');
var scrollspy = ScrollSpy(demo, {
animation: 'scale-up',
delay: 1000
});
demo.addEventListener('inview.scrollspy', () => {
console.log('进入视口');
});
demo.addEventListener('outview.scrollspy', () => {
console.log('离开视口');
});
参与开发
开发环境
yarn start
编译打包
yarn build
[contributors-url]: