当元素相交时，如何在每个像素处获取“交集观察器”回调触发器？

Question

我正在使用Intersection Observer API来帮助我实现视差效果。到目前为止，除一种情况外，其他所有东西都运行良好：

当图像已经可见并且在页面中间时，只要图像不与视口边缘相交，就不会有回调触发器。因此，我无法用从回调接收到的boundingClientRect更新视差转换的位置。

DF['Prenume'].str.extract(r'\d{1,2}\.\d{2}\.\d{4}')

即使图像完全可见并且不与任何东西相交，Intersection Observer API是否有办法进行回调？

Answer 1

Chrome的快速解决方法（因为这似乎是Chrome的特定问题）是在动画发生时触发布局计算。添加类似的东西似乎可行，但是您可能希望添加一些transitionstart / transitionend事件，以确保它仅在过渡处于活动状态时才运行。

  const refresh = () => {
    image.clientWidth // triggers layout, which triggers intersection to be recalculated
    requestAnimationFrame(refresh)
  }
  requestAnimationFrame(refresh)

演示：https://jsfiddle.net/01qa26L5/