@eyeear/scene v1.0.3

Scene

场景滚动监控，元素在窗口可见时、到达指定位置时触发回调，可用于模块、图片懒加载。

安装

npm install @eyeear/scene --save

使用

import Scene from '@eyeear/scene'

OR

<script src="lib/scene.js"></script>

  <div class="wrapper">
      <div class="box">场景1</div>
      <div class="box">...</div>
      ...
  </div>

  new Scene('.wrapper', {
      offsetTop: 40,
      onActive(index, scene) {
          // scene对应场景到指定位置了
      },
      onVisible(scene, index) {
         // scene对应场景在窗口可见了
      }
  })

选项

  new Scene(el, options)

  el 
    - 场景外围容器 设置了选项scene可设为null 一个css选择器或者元素对象
  
  options
    - 选项属性
    - offsetTop 激活的位置相对顶部的偏移  默认 0 
    - scene 手动设置要监控的场景 默认未定义 一个css选择器类名或者元素对象类数组
    - visibled 手动设置可见状态的属性 属性值为true时 onVisible回调在对应scene中只执行一次  默认'visibled' 
    - actived 手动设置激活状态的属性 属性值为true时 onActive回调在对应scene中只执行一次  默认'actived'
    
    - 选项方法
    - onVisible 在视口中可见触发回调 参数(scene, index)
    - onActive 在指定位置时触发回调 参数(index, scene)
  
  instance 实例方法
    - scrollTo(index, duration) 滚动到对应场景
    - destroy() 要销毁实例时调用 注销事件绑定