in view

in-view.js ？

当 DOM 元素进入或退出视口时收到通知。一个小型（压缩后约 1.9kb）、无依赖性、适用于 IE9+ 的 JavaScript 实用程序。

camwiegert.github.io/in-view

---

安装

下载最新版本并将其包含在您的标记中或使用 npm 安装：

npm install --save in-view

---

基本用法

通过视图内，您可以注册元素进入或退出视口时调用的处理程序。每个处理程序接收一个元素，即进入或退出视口的元素，作为其唯一的参数。

 inView ( '.someSelector' )
    . on ( 'enter' , doSomething )
    . on ( 'exit' , el => {
        el . style . opacity = 0.5 ;
    } ) ; 

---

应用程序编程接口

in-view 为使用inView(<selector>)捕获的每组元素维护一个单独的处理程序注册表。每个注册表都公开相同的四种方法。 in-view 还公开了四个顶级方法。 （ is 、 offset 、 threshold 、 test ）。

inView(<选择器>).on(<事件>, <处理程序>)

向event selector选择的元素注册一个处理程序。视图中发出的唯一事件是'enter'和'exit' 。

 inView ( '.someSelector' ) . on ( 'enter' , doSomething ) ;

inView(<选择器>).once(<事件>, <处理程序>)

向event selector选择的元素注册一个处理程序。注册过once处理程序只会被调用一次。

 inView ( '.someSelector' ) . once ( 'enter' , doSomething ) ;

inView.is(<元素>)

检查element是否在视口中。

 inView . is ( document . querySelector ( '.someSelector' ) ) ;
// => true

inView.offset(<偏移>)

默认情况下，如果某些内容破坏了视口的任何边缘，则视图中会考虑视口中的某些内容。这可用于设置距该边缘的偏移量。例如，如果元素将视口的任何边缘打破至少100像素，则偏移量100将考虑视口中的元素。 offset可以是正整数或负整数。

 inView . offset ( 100 ) ;
inView . offset ( - 50 ) ;

还可以通过传递对象来设置每个方向的偏移量。

 inView . offset ( {
    top : 100 ,
    right : 75 ,
    bottom : 50 ,
    left : 25
} ) ;

inView.threshold(<阈值>)

设置元素在视口中需要可见的高度和宽度的比率。默认为0 ，表示任意数量。阈值0.5或1将要求元素的高度和宽度分别有一半或全部可见。 threshold必须是0到1之间的数字。

 inView . threshold ( 0 ) ;
inView . threshold ( 0.5 ) ;
inView . threshold ( 1 ) ;

inView.test(<测试>)

使用自定义函数覆盖视图中的默认可见性标准。该函数将接收元素和选项对象作为其仅有的两个参数。当元素应被视为可见时返回true ，否则返回false 。

 inView . test ( ( el , options ) => {
    // ...
} ) ;

inView(<选择器>).check()

手动检查selector选择的元素的状态。默认情况下，所有注册表都会在window的scroll 、 resize和load事件上进行检查。

 inView ( '.someSelector' ) . check ( ) ;

inView(<选择器>).emit(<事件>, <元素>)

手动为任何单个元素发出event 。

 inView ( '.someSelector' ) . emit ( 'exit' , document . querySelectorAll ( '.someSelector' ) [ 0 ] ) ; 

---

浏览器支持

in-view 支持所有现代浏览器和 IE9+。

需要注意的是，in-view 使用 MutationObserver 来检查 DOM 突变后注册元素的可见性。如果您在 IE9-10 中需要该功能，请考虑使用 polyfill。

---

表现

任何监视滚动事件的库都存在降低页面性能的风险。为了缓解这个问题，目前， in-view 仅在每个window的load 、 resize和scroll事件上注册一个受限制（最多每 100 毫秒一次）的事件侦听器，并使用这些事件对每个注册表运行检查。

使用 IntersectionObserver

有一个新兴的浏览器 API IntersectionObserver ，旨在为开发人员提供一种检查 DOM 元素可见性的高性能方法。展望未来，in-view 的目标是在受支持时委托给IntersectionObserver ，仅在必要时才回退到轮询。

---

许可麻省理工学院