请教各位, 前端技术中有较好的文本分页方案吗?

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 2294 days ago, the information mentioned may be changed or developed.

请教各位, 前端技术中, 是否有这样一种方案.
根据区域大小, 比如屏幕宽高, 将较长的一片文章, 分页成多页.
主要是用于小说阅读器上面. 阅读器的左右翻页和仿真翻页需要基于这个分页来做.

分页

阅读器

请教

翻页

5 replies • 2020-08-07 13:48:45 +08:00

yaphets666

Jul 28, 2020

我觉得这个搞不了只能粗略的计算一下屏幕高 /行高要精确整的话要做一个引擎

Exin

Jul 28, 2020

1. 确定行高
2. 计算可视范围行数
3. 完整渲染整个章节到 DOM （怕太长可以分章节）
4. 控制滚动行为，每次翻页即滚动可视范围行数的距离

翻页效果可以通过渲染两份 DOM 在翻页时交替来实现

此外碰到图片之类的非文本，要另作计算

undermoodzyx

Jul 28, 2020

virtual scroll 了解一下，感觉可以给 up 主一点思路

chnwillliu

Aug 7, 2020

自动分页的话 column 系列 CSS 属性就是专门用来控制文本流分列渲染的，你把容器的高度定为屏幕高度，设定每列宽度为屏幕宽度，让 column-count 自动计算就可以啦。只不过这个无法做到仿真翻页效果，因为你没法单独控制每一列的样式，这个列容器对 CSS 是透明的。

等 CSS Regions 草案有新进展后估计就比较轻松能实现了吧 https://caniuse.com/#feat=css-regions

CoCoMcRee

Aug 7, 2020

@chnwillliu 感谢