E5.11.3per-tab scroll position设计

页签内的滚动位置需独立保持

别名: 页签滚动保持 · independent panel scroll

概念解释

每个页签面板是一块自己的内容,通常比一屏长。页签各自保持滚动(per-tab scroll position)要求从评价翻到一半再去看规格、再回来时,评价仍停在刚才那一段。切换切面不是刷新对象,不应把每一块都重置到顶。这和底部标签栏保存整条导航栈不同:这里保存的是同一对象上各面板的视口,不是跨目的地的页面层级。

机制

人把未读完的切面当成还摊开的那一页书。评价看了二十条,去规格核对尺寸,回来还要接着第二十一条。共享一个滚动容器、或销毁面板时丢掉偏移,回来看到的是该切面的开头,用户会以为评价被刷新了,或以为自己记错了进度。独立保持的是面板内部的滚动,对象级的标题不必跟着动;若连标题一起滚走,切回时还要先找回页签条本身。

保持失败还有一种隐蔽形式:面板用同一份 DOM,切换只改数据,滚动条还停在上一切面的像素上。规格很短时,评价留下的大偏移会让规格看起来是空白,人以为这个切面是空的。所以「独立」也包括「不要借用上一块的像素」。

边界

切面内容每次进入都应从头读(验证码、一次性声明)时,重置是该切面的约定。内容被过滤或重新加载后,旧偏移可能指向已不存在的块,应落到顶部或最近仍存在的锚点。嵌套滚动(页签内还有长列表)要分清外层页面滚动和内层面板滚动,只共享外层会在切页签时把整个对象滚走。内存紧张时可以丢掉不可见面板的像素级偏移,但应记住锚点 id,回来至少落到同一条。

怎么落地

  • 为每个页签面板存自己的滚动偏移或锚点;切走只隐藏,不把偏移写到共享容器上。
  • 切回时先恢复该面板的偏移,再允许滚动;短面板若恢复后超出自身高度,夹紧到自身底部,不要露出空白。
  • 页签条本身保持在对象标题附近稳定可见,不要跟面板滚动一起消失,除非有明确的沉浸阅读模式。
  • 验证:在长切面滚到中部,换到另一切面再换回来,对照进入前的截屏。偏移丢失或短切面出现大块空白即失败。再确认页签条未被内层滚动带出屏幕。

延伸

  • 同组E5.11.1 页签表达并列的内容分区 · E5.11.2 页签数量超出宽度需滚动或折叠
  • 相邻E5.02 底部标签栏 · E5.07 无限滚动
  • 站内检索per-tab scroll · panel state · scroll restoration

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E5.11.3