跳到主要内容

滚动页面

滚动页面节点控制页面或元素的滚动行为，支持五种滚动模式。

概述​

支持五种滚动模式：

  • 滚动到顶部 — 滚动到页面或容器顶部
  • 滚动到底部 — 滚动到页面或容器底部
  • 滚动到元素所在位置 — 滚动到指定元素位置
  • 从当前位置再次滚动 — 从当前位置相对滚动指定距离
  • 滚动到指定位置 — 滚动到指定像素位置

统一配置「滚动元素」（选择要滚动的容器）和「时长」。

滚动页面

快速上手​

  1. 拖入「滚动页面」节点到画布
  2. 填写「滚动元素」CSS 选择器（通常为页面容器或 body）
  3. 选择滚动模式
  4. 根据模式填写对应参数（如锚点元素、距离）
  5. 可选设置滚动时长（秒）
  6. 执行

使用方式​

滚动到顶部​

将「滚动模式」设为滚动到顶部。页面或容器直接滚动到最上方，无需额外参数。

滚动到底部​

将「滚动模式」设为滚动到底部。页面或容器直接滚动到最下方，无需额外参数。

滚动到元素所在位置​

将「滚动模式」设为滚动到元素所在位置，然后在「锚点元素」中填写目标元素的 CSS 选择器。执行后页面会滚动到该元素所在位置。

从当前位置再次滚动​

将「滚动模式」设为从当前位置再次滚动，然后在「滚动距离」中输入要滚动的像素值。正数向下滚动，负数向上滚动。

滚动到指定位置​

将「滚动模式」设为滚动到指定位置，然后在「指定距离」中输入目标像素位置。执行后页面或容器直接滚动到该位置。

通用配置​

  • 滚动元素：CSS 选择器，指定要滚动的容器（通常为页面容器或 body）
  • 时长（秒）：滚动动画时长，越长滚动越平缓，最小 1 秒

常见问题​

滚动后懒加载内容没有触发​

现象：滚动到底部后，页面没有加载新数据。

原因：懒加载通常需要滚动到某个特定元素附近才会触发，直接瞬间跳到底部可能被识别为无效滚动。

解决：使用 element 模式滚动到列表末尾的元素位置，并适当增加滚动时长让行为更像真人操作。