C3.23.1Nested scroll boundary handoff设计研究

内层滚动到边界后交棒给外层

别名: 滚动交棒 · nested scrolling · scroll chaining

概念解释

内层列表滚到头之后,同一手指的剩余位移应交棒给外层容器,让整页继续走。这是滚动链(scroll chaining / nested scrolling):一次接触、两段归属,分界点是内层的内容边界。它不是按下时的所有者竞选——所有者可以仍是内层——而是内层已经无法消耗位移时,把增量转让出去。

机制

内层在自己的 min/max 偏移内消化 dy;当 offset + dy 越出范围,余数 overflow 成为外层的输入。Android 的 nested scrolling 协议、iOS 上子 UIScrollView 与父级的 bounce 协商,都是在算这笔余数。交棒必须发生在同一触摸的后续帧,而不是要求用户抬手再按。若内层在边界吞掉余数(橡胶回弹独占),外层永远等不到位移,用户会感觉“卡在子视图里”。若内层尚未到边界就把增量分给外层,子视图会提前被抽走。

怎么研究

在内层可滚长度已知的嵌套结构上,从中部滚向外,记录越过边界那一帧内外层偏移的增量。因变量:余数是否守恒(内层停住的量 + 外层开始的量 ≈ 手指位移)、交棒是否要第二次手势。自变量:内层是否回弹、外层是否也有回弹。把“到边界不交棒”和“没到边界就交棒”分成两类失败。

边界

内层若被设计成封闭抽屉(必须显式关闭),到边界也不应交棒。分页轮播到最后一页是否把外层纵向列表带走,是产品选择,不是物理必然。指针滚轮的 chaining 在浏览器里常被 overscroll-behavior 关掉,与触摸默认不同。交棒描述边界转让,不描述起始时谁拥有触点,也不描述交棒瞬间的顿挫手感。

怎么落地

  • 内层到达 min/max 后把溢出位移交给外层,同一触摸内完成,不要求重新按下。
  • 需要锁死的子视图(选择器、抽屉)显式切断滚动链,并在边界用回弹说明“到头了”。
  • 用手指从子列表中部一路滚过边界:子停外走,且余数对得上;若必须抬手再滚外层,就是交棒缺失。

延伸

  • 同组C3.23.2 交棒时机不当会产生卡顿感 · C3.23.3 横向滚动区嵌在纵向列表中的方向判别
  • 相邻C3.19 手势冲突与消歧 · C3.07 平移
  • 站内检索scroll chaining · nested scrolling · overflow handoff

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/C3.23.1