/viewport-check

Check if the element entry viewport.

Primary LanguageJavaScriptMIT LicenseMIT

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

npm

特性

  1. 可选择基于屏幕或者元素来判断是否进入视口，例如进入滚动容器30%后，或者元素出现30%后

  2. 输入方式多样化，可以输入数字200，字符串30%，小数0.3

  3. 可选择autoDestory模式，进入一次视口后，移除监听，销毁对象

  4. 横向纵向滚动判断

  5. 基于自定义容器的滚动，默认为window

  6. 元素高度自定义，可选择：

    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 需要监控的元素 / HTMLElement[String] true
context 滚动容器元素 window HTMLElement[String] false
offset 进出视口的偏移量 0.3 Number[String] 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

使用CSS高度设置

默认情况下使用getBoundingClientRect计算元素高度，但是当元素初始为scale(0)的情况，无法准确获取的高度， 因此需要使用getComputedStyle计算高度。

关于高度计算

在css的盒模型中，最外层的是margin，接着是border，接着是padding和height。

在ViewportCheck中，默认是margin:false，border:true， padding:true；这么做遵循了element.offsetHeight的配置。

因此，如果设定了margin:true，也就意味着包括margin，同样也包括了border和padding。

如果只想计算最纯粹的height，那么需要设定border:false, padding:false, 因为margin默认为false。