长文滚动测试：一直往下读会怎样

这篇是用来测什么的

页面够不够长、滚起来顺不顺、回到顶部的按钮什么时候出现、播放器会不会在滚动时收起来、长文里的锚点还准不准——这些都得有足够长的内容才测得出来。

下面每一节都是真实可读的文字，不是重复粘贴的占位符，你可以直接往下读，也可以只看标题。

一、长文的第一屏

从列表点进一篇文章，最先看到的是标题、日期、阅读时长、标签，然后才是正文。这一屏的目标只有一个：让人立刻判断“这篇值不值得读下去”。

所以开头别铺垫太久，直接说清楚这篇要解决什么问题、大概多长、需不需要动手跟着做。

二、为什么要写长文

短内容适合记结论，长文适合把一件事讲透。判断标准很简单：如果读者照着做能独立完成，且中途不需要再去找别的资料，那它就该是长文。

长文最怕两种东西：一是没有小标题，几百字挤成一团；二是小标题太多，每节只有两行，读起来像目录的注释。

三、小标题的节奏

一般两三百字一个小标题最舒服。手机上一屏大概能放三百字，正好一个到两个小标题，读者随时能找到自己的位置。

小标题本身也要能独立成句，比如“小标题的节奏”比“关于节奏”更清楚。

四、段落长度

超过五行就该拆段。手机上五行大约是一屏的三分之一，读完不喘气。

短段落还有个副作用：整个页面会变长，滚动条看起来更有分量——这正是我们这次要测试的场景。

五、列表与表格

能用列表就别写长句：

• 步骤类内容用有序列表
• 并列内容用无序列表
• 参数与说明用表格

表格在手机上容易挤，列数尽量控制在三列以内，超出就拆成两张表。

六、代码块的处理

长代码块在手机上一定超宽，所以必须允许横向滚动，并且给出提示，避免读者以为被截断了。

def build_report(rows, *, title="报告", page_size=20):
    """把行数据分页整理成可渲染的结构。"""
    pages = []
    for index in range(0, len(rows), page_size):
        chunk = rows[index:index + page_size]
        pages.append({
            "page": index // page_size + 1,
            "rows": chunk,
        })
    return {"title": title, "pages": pages, "total": len(rows)}

七、引用怎么用

引用适合放别人的原话、规范条款、或者需要强调的结论：

判断一篇文章有没有写完，看读者能不能只靠它把事情做成。

太长就不需要引用了，直接自己说。

八、图片位置

图片放在相关段落之后，别堆在开头。每张图配一句说明，讲清楚“看图能知道什么”。

九、锚点与目录

长文的小标题会自动生成锚点，方便直接分享某一段。锚点标题要短，别在标题里放标点，否则链接会变得又长又难看出是什么。

十、滚动过程中的细节

滚动时有三件事在同时发生：

1. 页面顶部逐渐离开视野，导航不再可见
2. 播放器自动收起成圆点，避免挡住正文
3. 回到顶部按钮在 400px 后淡入

这三件事都要做到“不打断阅读”——出现和消失都不能有跳动。

十一、性能怎么办

长页面的主要开销是首次渲染，滚动本身很便宜。所以优化重点在：

• 图片懒加载
• 代码高亮只在可见区域执行
• 避免滚动时做大面积布局计算

十二、移动端与桌面端的差异

桌面端一屏能放八百字，移动端只有三百字左右，同样的内容在大屏上看起来很短。

所以判断“够不够长”要在手机上测，桌面端看着舒服不代表手机上不累。

十三、什么时候该拆成多篇

出现下面任一情况，就该拆：

• 单篇超过八千字
• 出现两个以上独立主题
• 读者只想看其中一节

拆完之后用系列把它们串起来，比一篇超长文好维护。

十四、结尾该写什么

结尾不要重复总结全文，写清楚“接下来可以做什么”更有用：给一个可执行的动作、一个可以继续读的链接、或者一个需要自己动手验证的练习。

十五、现在滚到底了

如果你一口气滑到这里，说明长文阅读的体验是通的。往下看页脚，然后点右下角的 ↑ 试试回到顶部——这就是这篇文章存在的全部意义。

再补几段，确保页面足够长，滚动条明显变短。

第一段：测试文章里也会出现很长的句子，用来观察行高和字距是否合适，尤其是在 15px 字号、1.75 行高的设置下，中文的行间距是否让人读起来不累，标点符号是否会挤在一起，数字和英文是否会显得突兀。

第二段：同样的内容在不同设备上宽度不同，手机上大约每行 20 个汉字，桌面端可能到 45 个，行宽过宽会让眼睛回行困难，过窄又频繁换行，两者都影响阅读节奏。

第三段：如果你看到这里还没有关掉页面，说明排版至少没有明显劝退的地方，这本身就是一次有效的验证。

第四段：到这里，页面长度已经足够触发全部三个滚动相关的交互：播放器收起、回到顶部出现、锚点定位。可以开始检验了。