需求描述
使用者可以根据编辑的需要,将内容定位到对应段落的具体位置,使对应段落在页面上显示。如:用户点击侧栏的大纲,页面自动显示对应位置的内容。用户点击消息推送的“查看按钮”,页面自动显示对应段落。
解决办法
由于 react-virtualized 的功能限制,设置 scrollToIndex 参数时,页页面滚动都对应的段落位置。所以现在的实现方式是:反复滚动页面,知道目标段落出现在页面中。具体步骤为:先计算当前渲染位置与目标段落的之间隔了多少个段落,然后根据相隔的段落数量,获得一个预计的滚动范围,滚动页面。反复操作页面的滚动条位置,直到目标段落出现在页面内,然后将目标段落定位到页面顶部附近。
出现的问题
在 safari 中使目标段落出现在页面内的操作,容易进入一个死循环,页面一直在上下滚动,无法停下来。这种现象在定位到文章末尾段落的时候特别容易出现
其他:
演示DEMO: https://f9yg3.codesandbox.io