scrollspy-lib v1.0.0

ScrollSpy-Lib

ScrollSpy-Lib：滚动检测 原生js版本的scrollspy,滚动到视口内自动触发动画，以及监听进入视口/离开视口的事件自定义回调处理。

浏览器支持

IE 9+ ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

npm 安装

$ npm install scrollspy-lib --save

如何使用

ScrollSpy(document.querySelector('#demo'))

ScrollSpy接收2个参数

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: