IntersectionObserver功能（Chrome 51功能，知道特定元素何时处于视口内或视口外）

本文概述

使用方法
我应该使用什么功能
对于我不应该使用此功能

IntersectionObservers可以让你知道当观察到的元素进入或退出浏览器的视口时, Chrome 51提供了此功能(你可以使用Chrome Canary进行测试)。
【IntersectionObserver功能（Chrome 51功能，知道特定元素何时处于视口内或视口外）】你可能需要这样做, 以便可以及时延迟加载图像, 或者因为你需要知道用户是否实际上正在查看某个广告横幅。你可以通过挂接scroll事件或使用定期计时器并对该元素调用getBoundingClientRect()来实现。但是, 这种方法非常缓慢, 因为每次调用BoundingClientRect()都会迫使浏览器重新布局整个页面, 并且会给你的网站带来很大的麻烦。当你知道你的网站正在iframe中加载并且你想知道用户何时可以看到某个元素时, 事情几乎变得不可能。
使用方法该API确实很清晰且易于使用, 将使用新的IntersectionObserver()创建一个IntersectionObserver对象。

var callback = function(elementLocationInformation){console.log(elementLocationInformation); }; var settings = {// The root to use for intersection.// If not provided, use the top-level document’s viewport.root : null, // Same as margin, can be 1, 2, 3 or 4 components, possibly negative lengths.// If an explicit root element is specified, components may be percentages of the// root element size.If no explicit root element is specified, using a percentage// is an error.rootMargin : "0px", // Threshold(s) at which to trigger callback, specified as a ratio, or list of// ratios, of (visible area / total area) of the observed element (hence all// entries must be in the range [0, 1]).Callback will be invoked when the visible// ratio of the observed element crosses a threshold in the list.threshold : [0]}; var IO = new IntersectionObserver(callback, settings);

回调将在观察到的元素部分进入视图时触发一次, 而在离开视口时则触发一次。这样, IntersectionObserver会为你提供一个答案, “ 元素X是否在视图中？” 。
观察以下代码显示了如何从返回的IntersectionObserver对象中使用observe方法观察元素：

var io = new IntersectionObserver(function(entries){if(entries[0].intersectionRatio){console.log("Is visible on scroll ! See more info using console.log"); console.log(entries[0].intersectionRect); }else{console.log("Is not visible"); }}); // Start observing an elementio.observe(document.getElementById("myImaginaryId"));

entrys元素将是一个具有以下结构的对象的数组：

IntersectionObserver功能（Chrome 51功能，知道特定元素何时处于视口内或视口外）

文章图片
不观察请注意, 需要先观察元素, 然后再使用unobserve方法。你可以再次使用观察功能重新审核该过程。

io.unobserve(document.getElementById("myImaginaryId"));

禁用观察若要禁用整个IntersectionObserver, 请使用断开连接方法。

io.disconnect();

我应该使用什么功能 IntersectionObservers在设计时特别考虑了广告服务和社交网络小部件, 它们经常使用iframe, 并且可以从知道它们是否在视图中受益(以增强许多功能)。如果iframe观察到其元素之一, 则滚动iframe以及滚动包含iframe的窗口都会在适当的时间触发回调。但是, rootBounds将设置为null以避免跨源泄漏数据。
对于我不应该使用此功能你需要知道IntersectionObservers既不是像素完美也不是低延迟。使用它们来实现诸如依赖于滚动的动画之类的操作必然会失败, 因为严格来说, 数据将在你开始使用时过时。解释器具有有关IntersectionObserver原始用例的更多详细信息。
你可以阅读以下自述文件, 获取有关此api的更多信息, 以及有关该API的用途以及使用方法的信息, 此外, 还可以在原始的Google Article中阅读有关此功能的更多信息。