[![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]: