小说阅读器中分页的实现[js]

---

1. 写在前面

最近在尝试做一个小说阅读器的Web App，对于阅读器来说最重要的肯定就是读书的界面了。在这个页面中，需要将大段的文字进行分页并让文字正好填满屏幕。一开始我把问题想得较为简单，但在实现过程中遇到了一些困难。

2. 一开始的思路

接口返回的数据即为小说某一章的全部文本。在我一开始的想法中，可以在收到返回数据后，将文本全部放入一个容器中，通过容器的高度除以屏幕可视区域的高度计算出需要拆分的页数。接着渲染相应个数的容器并且通过overflow: hidden和设置scrollTop的值显示每页内容。然而在实现过程中发现了这个方案存在的一个巨大问题：文字有可能被上下分成两半。

3. 文本分割

首先在页面创建一个和展示区域大小一致的容器。通过fontSize和lineHeight可以大致估算出每页最多容纳的文字数量，将文本按最大文字数量截取并放入容器中，如果容器高度超出则减少一行文字；如果容器高度小于等于展示区域高度，则逐字增加，直到正好填满该容器。

const getPages = (text) => {
   
  const {
    clientWidth, clientHeight } = document.body // 获取页面宽高
  const fontPerLineNum = Math.floor(clientWidth / fontSize) // 每行字数
  const colPerPageNum = Math.floor(clientHeigh