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

本文概述

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

IntersectionObservers可以让你知道当观察到的元素进入或退出浏览器的视口时, Chrome 51提供了此功能(你可以使用Chrome Canary进行测试)。

你可能需要这样做, 以便可以及时延迟加载图像, 或者因为你需要知道用户是否实际上正在查看某个广告横幅。你可以通过挂接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 element
io.observe(document.getElementById("myImaginaryId"));

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

不观察

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

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

禁用观察

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

io.disconnect();

我应该使用什么功能

IntersectionObservers在设计时特别考虑了广告服务和社交网络小部件, 它们经常使用iframe, 并且可以从知道它们是否在视图中受益(以增强许多功能)。如果iframe观察到其元素之一, 则滚动iframe以及滚动包含iframe的窗口都会在适当的时间触发回调。但是, rootBounds将设置为null以避免跨源泄漏数据。

对于我不应该使用此功能

你需要知道IntersectionObservers既不是像素完美也不是低延迟。使用它们来实现诸如依赖于滚动的动画之类的操作必然会失败, 因为严格来说, 数据将在你开始使用时过时。解释器具有有关IntersectionObserver原始用例的更多详细信息。

你可以阅读以下自述文件, 获取有关此api的更多信息, 以及有关该API的用途以及使用方法的信息, 此外, 还可以在原始的Google Article中阅读有关此功能的更多信息。