ScrollObserver 阈值

根据目标元素在容器内的滚动位置，确定触发动作的节点。
阈值通过 onScroll() 参数 Object 中的 enter 和 leave 属性来定义。

animate('.square', {
  x: 100,
  autoplay: onScroll({

    container: '.container',
    target: '.section',
    axis: 'y',
  ┌──────────────────────────┐
  │ enter: 'bottom top',     ├─ Thresholds
  │ leave: 'top bottom',     │
  └──────────────────────────┘
    sync: true,
    onEnter: () => {},
    onLeave: () => {},
    onUpdate: () => {},
  })
});

通过比较两组值（目标值和容器的 start 及 end 值）来指定元素进入或离开视口的条件。

┌────────────────────────────────┐- Container Start
│                                │
│   Container                    │
│                                │
│          ┌──────────┐----------│- Target Start
│          │          │          │
│          │  Target  │          │
└────────────────────────────────┘- Container End
           │          │
           └──────────┘------------ Target End

不同的语法

条件可以使用以下语法编写

对象

onScroll({
  // Enters when the top of the target meets the bottom of the container
  enter: { target: 'top', container: 'bottom' },
  // Leaves when the bottom of the target meets the top of the container
  leave: { target: 'bottom', container: 'top' }
});

容器值字符串

可以直接传入容器值，此时目标值默认为 enter 的 'start' 和 leave 的 'end'。

onScroll({
  // Enters when the top of the target meets the bottom of the container
  enter: 'bottom',
  // Leaves when the bottom of the target meets the top of the container
  leave: 'top'
 });

容器和目标值简写字符串

onScroll({
  // Enters when the bottom of the container meets the top of the target
  enter: 'bottom top',
  // Leaves when the top of the container meets the bottom of the target
  leave: 'top bottom',
});

默认 enter

'end start'

默认 leave

'start end'