存在问题
聊天页有个功能需求：下拉加载历史记录。
这样的需求很自然，而且日常使用中也随处可见，但真正要自己去实现，还是遇到了不少问题。
一个基础的思路是：
- 监听下拉操作，下拉结束后从后端获取历史记录并将其放进聊天记录数组
- 新获取的历史记录会将你刚刚看的信息挤下去，这时你要往上拉才能回到你刚刚看的信息。
- 虽然可以通过获取刚看的那条信息的位置，等历史记录拉取下来后再通过改变滚动条回到其原来的位置，但这样会让页面出现闪动，信息会先下去，然后再上来。
IntersectionObserver
- 不到20行js实现高性能图片懒加载
- IntersectionObserver - Web APIs | MDN
- Making use of Observers in React. Ever needed to manipulate the DOM when… | by Jens Lind | Strise | Medium
- Infinite scrolling in React with intersection observer - DEV Community
滚动到对应位置
overflow-anchor
- 解决聊天页下拉加载历史记录，新获取的历史记录把刚看的信息挤下去的问题 - 掘金
- overflow-anchor - CSS: Cascading Style Sheets | MDN
- Overflow-anchor | CSS-Tricks
Scroll Anchoring is a browser feature that attempts to prevent a common situation where you may scroll down a webpage before the DOM has fully loaded and, when it does, any elements that load above your current location push you further down the page.
反向渲染
这个设计很妙，但我没有使用。
计算并设置正确的滚动位置
位置不对
最终滚动到的位置和预期位置不对应。排查后发现是图片没有占位符导致的。