网页无限滚动方案的思考和实现（1）
时间：2023-09-10 14:06:01 | 来源：网站运营
时间：2023-09-10 14:06:01 来源：网站运营
网页无限滚动方案的思考和实现（1）：网页设计中，在内容过长、无法完整显示在用户的视图中时，设计者往往有两种选择：
1、把内容分页，并在每页里设置上一页、下一页和页数跳转接口，以允许用户在页面间跳转。Google的搜索页面是经典例子。
2、把全部内容连在一起，形成一个很长的页面，用户只需要上下滚动即可浏览所有内容。例子如Twitter和Facebook的时间流页面。
概括一下的话，也就是“分页”和“无限滚动”两种思路。从用户体验设计的角度看，使用无限滚动的好处很明显，例如：
- 内容在页面上的顺序完全对应了逻辑顺序，不需要引入页数的多余信息
- 用户的唯一交互方式是滚动，比起需要翻页和滚动两种操作的分页设计，只需要一种操作的无限滚动方案更具有沉浸感
另一方面，现有的无限滚动方案，往往存在一些致命的弱点：
- 不支持改变已经渲染的项目高度，或者改变的代价过高
- 难以快速定位到列表中的特定项目
- 因为上面的原因，对浏览器特性（历史记录和书签、前进/后退、分享链接等）支持不好
最近在自己的项目中做了一个React组件，解决了一些问题。特性包括：
- 仅渲染在视图内的项目以节省资源
- 在初次渲染时可以设置焦点
- 使用原生的overflow: scroll机制实现滚动
- 一些滚动组件使用了事件响应+transform等方式替代原生滚动机制（如iScroll），对浏览器的原生滚动优化（多线程等）支持不佳
- 自然地支持了翻页键/触摸板等交互方式
- 允许项目在渲染后随时改变自己的高度并展示动画
- 项目的高度变化不触发其他项目的Reflow
- 无论改变后的项目大小如何，保持用户正在阅读的项目顶端在视图中的相对位置
- 在用户滚动或滚动动画过程中，项目也可以改变高度
- 多个项目同时改变大小时，进行批处理更新以降低资源消耗
- 支持在组件外控制组件平滑跳转到制定项目
- 包括平滑跳转，组件中所有动画均使用FLIP实现以降低资源消耗
- 平滑滚动过程中，如果触摸列表，列表会停止在正确的预想位置
- 可以随时报告滚动位置、各项目高度和用户视图中的项目，从而支持保存视图
- 支持通过高度偏移量查找列表中的项目，时间复杂度为logN
受控平滑跳转，以及平滑跳转过程中触摸导致动画中止的效果：
https://www.zhihu.com/video/943168256404672512注意项目正在不断改变高度，但由于焦点修正机制，用户视图没有改变。
里面用到的新设计比较多，暂时没有时间系统地写，所以先开个专栏记录一下。
以后可能在这个专栏更新设计思路和实现。
在线咨询
