需求
章节滚动到底部时,自动加载下一章内容,章节滚动到顶部时,自动加载上一章内容。
解决办法
未找到合适的解决办法
遇到的问题
用户滚动起来手感很不畅爽
章节滚动到底部时,自动加载下一章内容,章节滚动到顶部时,自动加载上一章内容。
未找到合适的解决办法
用户滚动起来手感很不畅爽
用户可以在Dimzou中插入很长得内容,比如一本完整的圣经的内容或本文内容为4.5兆大小。内容插入之后,再次访问文章,页面内容可以正常加载。
将段落的内容分成区块进行显示。使用 react-virtualized
优化页面渲染
在 windows 的 edge 中长度为4.5兆的文本内容的后半部分无法完整显示出来。微软的edge浏览器对内容有最大高度限制。 react-virtualized 自动设置的高度值超出这个范围,不起作用,造成页面最多只能滚动到内容的中间部分。
使用者可以根据编辑的需要,将内容定位到对应段落的具体位置,使对应段落在页面上显示。如:用户点击侧栏的大纲,页面自动显示对应位置的内容。用户点击消息推送的“查看按钮”,页面自动显示对应段落。
由于 react-virtualized 的功能限制,设置 scrollToIndex 参数时,页页面滚动都对应的段落位置。所以现在的实现方式是:反复滚动页面,知道目标段落出现在页面中。具体步骤为:先计算当前渲染位置与目标段落的之间隔了多少个段落,然后根据相隔的段落数量,获得一个预计的滚动范围,滚动页面。反复操作页面的滚动条位置,直到目标段落出现在页面内,然后将目标段落定位到页面顶部附近。
在 safari 中使目标段落出现在页面内的操作,容易进入一个死循环,页面一直在上下滚动,无法停下来。这种现象在定位到文章末尾段落的时候特别容易出现
演示DEMO: https://f9yg3.codesandbox.io