spz-interact-observer 交互观测

基于滚动或鼠标移动交互的视差与吸顶动效控制器，可驱动目标元素随交互实时变换样式或位置

布局

logic

何时使用

需要让目标元素随页面滚动产生视差位移或缩放效果，增强页面层次感。
需要让元素随鼠标在目标区域移动时实现 3D 悬浮倾斜效果。
需要在页面滚动时，使某个元素自动吸顶或吸底，并根据其他固定元素的高度动态调整偏移量。

代码演示

基本用法

配置 target-id、from 和 to 属性，组件将监听页面滚动，并在目标元素进入视口时按插值平滑地更新其 CSS transform，实现视差效果。

向下滚动页面，卡片将随滚动产生视差位移

<spz-interact-observer
  id="spz-interact-observer-base"
  layout="logic"
  target-id="io-base-card"
  interact="scroll"
  from="translateY:0"
  to="translateY:-40"
  smoothness="20"
></spz-interact-observer>

<div class="io-base-scene">
  <div id="io-base-card" class="io-base-card"></div>
  <div class="io-base-tip">向下滚动页面，卡片将随滚动产生视差位移</div>
</div>

使用方法手动触发位置更新

配置 observe-id 属性后，组件会自动观测参照元素是否在视口内，并动态调整 target-id 元素的偏移量。通过调用 change 方法可手动触发一次位置重算。

顶部导航参照元素

吸顶条（位置随参照元素动态调整）

<!-- 监测 header 是否在视口内，并在 header 滑出时自动更新 sticky-bar 位置 -->
<spz-interact-observer
  id="spz-interact-observer-api"
  layout="logic"
  target-id="io-api-sticky-bar"
  interact="scroll"
  observe-id="io-api-header"
></spz-interact-observer>

<div class="io-api-scene">
  <div id="io-api-header" class="io-api-header">
    <span>顶部导航</span>
    <span style="font-size: 12px; color: var(--color-border);">参照元素</span>
  </div>
  <div id="io-api-sticky-bar" class="io-api-sticky-bar">吸顶条（位置随参照元素动态调整）</div>

  <div class="demo-buttons">
    <button @tap="spz-interact-observer-api.change()">手动触发位置更新</button>
  </div>
</div>

属性

属性名	说明	类型	默认值	是否必需
target-id	目标元素的 `id`，组件将对该元素应用动效	string	-	是
interact	交互触发类型，可选值：`scroll`（滚动）、`mousemove`（鼠标移动）	string	`scroll`	否
from	动效起始样式，格式为 `属性:值;属性:值`，支持 `translateX`、`translateY`、`translateZ`、`scaleX`、`scaleY`、`rotateX`、`rotateY`、`rotateZ` 等	string	-	否
to	动效终止样式，格式同 `from`；当 `to` 包含 `position:top` 或 `position:bottom` 时切换为吸顶/吸底模式	string	-	否
smoothness	滚动视差插值平滑度，值越大过渡越慢	number	`30`	否
distance	用于滚动用户模式（无 `from`/`to` 时），触发切换动作的滚动距离（px），默认为目标元素高度	number	-	否
observe-id	吸顶/吸底模式下，用于观测是否在视口内的参照元素 `id`，与 `rely-id` 二选一	string	-	否
rely-id	功能同 `observe-id`，与 `observe-id` 二选一	string	-	否
entry-show	布尔属性，若存在则首次进入页面时立即展示组件（默认首次在视口外时隐藏）	-	-	否
rely-sticky	布尔属性，若存在则仅在参照元素处于 `sticky` 或 `fixed` 定位状态时才触发位置重算	-	-	否

方法

change

在使用 observe-id 或 rely-id 的吸顶/吸底模式下，手动触发一次目标元素位置重算。无需传入参数。