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' }
});

容器值字符串

容器值可以直接传递，目标值对于进入默认为 'start'，对于离开默认为 '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',
});

默认进入

'end start'

默认离开

'start end'