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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 1575 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

分页

阅读器

请教

翻页

5 条回复 • 2020-08-07 13:48:45 +08:00

yaphets666

2020-07-28 10:23:47 +08:00

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

Exin

2020-07-28 10:48:04 +08:00

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

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

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

undermoodzyx

2020-07-28 17:59:05 +08:00

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

chnwillliu

2020-08-07 07:22:32 +08:00

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

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

CoCoMcRee

2020-08-07 13:48:45 +08:00

@chnwillliu 感谢