Viewport-check NPM

检测元素是否进入或者退出视口。

特性

可选择基于屏幕或者元素来判断是否进入视口，例如进入滚动容器30%后，或者元素出现30%后
输入方式多样化，可以输入数字200，字符串30%，小数0.3
可选择autoDestory模式，进入一次视口后，移除监听，销毁对象
横向纵向滚动判断
基于自定义容器的滚动，默认为window
元素高度自定义，可选择：
1. 包括margin, border, padding
2. 包括border, padding，不包括margin
3. 包括padding，不包括margin,border
4. 纯粹的高度，不包括margin, border, padding

效果查看

LIVE DEMO

待添加特性

暂无

使用说明

安装

npm install viewport-check

使用

import ViewportCheck from 'viewport-check'

new ViewportCheck({
  element:document.getElementById("target"),
  offset:0.3,
  baseAt:'target',
  margin:true,
  enter:(direction) => {
    console.log('enter, the height include margin, border and padding! The enter direction is:'+direction)
  },
  leave:() => {
    console.log('leave,The leave direction is:'+direction)
  }
})

Options

Attr	Description	Default value	Type	Required
element	需要监控的元素	/	HTMLElementString	true
context	滚动容器元素	window	HTMLElementString	false
offset	进出视口的偏移量	0.3	NumberString	false
baseAt	偏移量基于元素还是滚动容器	target	(target/context)	false
padding	高度计算是否包括padding更多	true	Boolean	false
border	高度计算是否包括border更多	true	Boolean	false
margin	高度计算是否包括margin更多	false	Boolean	false
useCssComputed	是否使用`css`的高度设置更多	false	Boolean	false
autoDestroy	是否在进入视口后销毁	false	Boolean	false
horizontal	是否横向滚动	false	Boolean	false
enter	进入视口的回调函数	(direction)=>{}	Function	false
leave	离开视口的回调函数	(direction)=>{}	Function	false