E5.11.3per-tab scroll position设计
页签内的滚动位置需独立保持
别名: 页签滚动保持 · independent panel scroll
概念解释
每个页签面板是一块自己的内容,通常比一屏长。页签各自保持滚动(per-tab scroll position)要求从评价翻到一半再去看规格、再回来时,评价仍停在刚才那一段。切换切面不是刷新对象,不应把每一块都重置到顶。这和底部标签栏保存整条导航栈不同:这里保存的是同一对象上各面板的视口,不是跨目的地的页面层级。
机制
人把未读完的切面当成还摊开的那一页书。评价看了二十条,去规格核对尺寸,回来还要接着第二十一条。共享一个滚动容器、或销毁面板时丢掉偏移,回来看到的是该切面的开头,用户会以为评价被刷新了,或以为自己记错了进度。独立保持的是面板内部的滚动,对象级的标题不必跟着动;若连标题一起滚走,切回时还要先找回页签条本身。
保持失败还有一种隐蔽形式:面板用同一份 DOM,切换只改数据,滚动条还停在上一切面的像素上。规格很短时,评价留下的大偏移会让规格看起来是空白,人以为这个切面是空的。所以「独立」也包括「不要借用上一块的像素」。
边界
切面内容每次进入都应从头读(验证码、一次性声明)时,重置是该切面的约定。内容被过滤或重新加载后,旧偏移可能指向已不存在的块,应落到顶部或最近仍存在的锚点。嵌套滚动(页签内还有长列表)要分清外层页面滚动和内层面板滚动,只共享外层会在切页签时把整个对象滚走。内存紧张时可以丢掉不可见面板的像素级偏移,但应记住锚点 id,回来至少落到同一条。
怎么落地
- 为每个页签面板存自己的滚动偏移或锚点;切走只隐藏,不把偏移写到共享容器上。
- 切回时先恢复该面板的偏移,再允许滚动;短面板若恢复后超出自身高度,夹紧到自身底部,不要露出空白。
- 页签条本身保持在对象标题附近稳定可见,不要跟面板滚动一起消失,除非有明确的沉浸阅读模式。
- 验证:在长切面滚到中部,换到另一切面再换回来,对照进入前的截屏。偏移丢失或短切面出现大块空白即失败。再确认页签条未被内层滚动带出屏幕。