滚动视图模式

相关源文件

• js/controllers/notes.js
• js/controllers/scrollview.js
• js/controllers/slidenumber.js
• js/utils/constants.js

概述

Reveal.js 的滚动视图模式提供了一种体验演示文稿的替代方式，它将传统的逐张幻灯片导航转变为连续的可滚动页面。此功能允许观看者平滑地滚动浏览演示文稿内容，而不是在离散的幻灯片之间导航。

与一次显示一张幻灯片的默认演示模式不同，滚动视图模式将所有幻灯片线性化为一个长滚动文档，同时保留了过渡、动画和其他交互式元素。

来源: js/controllers/scrollview.js9-13

架构

滚动视图控制器是在 reveal.js 框架内实现的。它在激活时重新组织演示文稿的 DOM，并在停用时恢复原始结构。

滚动视图控制器将标准幻灯片转换为可滚动页面，并为片段、自动动画和背景提供特殊处理。

来源: js/controllers/scrollview.js13-923

激活过程

当滚动视图模式激活时，控制器会对演示文稿结构执行一系列转换。

激活过程将演示文稿转换为垂直滚动格式，同时保留原始幻灯片状态以供以后恢复。

来源: js/controllers/scrollview.js30-157

页面结构

在滚动视图模式下，每张幻灯片都会转换为一个结构化的页面元素，其中包含特定的组件

每张幻灯片都包裹在一个页面元素中，该元素包含幻灯片内容以及用于片段和动画的各种触发器。添加了滚动吸附点来控制滚动行为。

来源: js/controllers/scrollview.js60-104 js/controllers/scrollview.js280-390

滚动触发器

滚动触发器是控制内容可见性和动画的关键机制，因为用户会滚动浏览演示文稿。

触发器类型

1. 幻灯片触发器：控制幻灯片何时可见或隐藏
2. 片段触发器：显示或隐藏幻灯片内的片段
3. 自动动画触发器：处理幻灯片之间的动画

每个触发器都有一个计算出的滚动范围和激活/停用函数。

当用户滚动时，控制器会持续监控滚动位置，并根据其范围值激活或停用触发器。

来源: js/controllers/scrollview.js422-468 js/controllers/scrollview.js608-667

进度条

滚动视图模式提供了一个可视化进度条，该进度条显示用户在演示文稿中的当前位置，并能够快速导航。

进度条显示

• 当前滚动位置，带有一个播放头
• 幻灯片位置
• 幻灯片内的片段位置
• 交互式控件，可跳转到特定位置

来源: js/controllers/scrollview.js207-265 js/controllers/scrollview.js551-606 js/controllers/scrollview.js674-717

配置选项

滚动视图模式可以通过几个配置选项进行自定义

选项	类型	默认	描述
scrollLayout	字符串	-	设置为“紧凑”时，幻灯片占据最小的垂直空间
scrollSnap	字符串/布尔值	-	控制 CSS 滚动吸附行为（“proximity”、“mandatory”等）
scrollProgress	字符串/布尔值	-	控制进度条可见性（“auto”、true、false）

这些选项会影响滚动演示文稿的视觉布局和行为。

来源: js/controllers/scrollview.js286-296 js/controllers/scrollview.js405-415 js/controllers/scrollview.js707-714

与 Reveal.js 集成

滚动视图模式与其他 Reveal.js 组件和功能集成

值得注意的交互

• 在滚动视图模式下，演讲者笔记被禁用
• 内容根据需要动态加载和卸载
• 背景被保留并应用于页面元素
• 支持幻灯片之间的自动动画

来源: js/controllers/scrollview.js792-825 js/controllers/notes.js41-45 js/controllers/scrollview.js632-639

导航和状态管理

滚动视图控制器管理导航和会话状态

1. 滚动导航：处理滚动事件以更新幻灯片可见性
2. 手动导航：用于编程导航的方法
3. 会话存储：记住页面重新加载之间的滚动位置

状态转换在激活/停用或在幻灯片之间导航时处理。

导航方法	描述
prev()	滚动到上一页
next()	滚动到下一页
scrollToSlide(slideElement)	滚动到特定幻灯片
鼠标滚动	自然滚动浏览内容
进度条	点击跳转到某个位置

来源: js/controllers/scrollview.js722-758 js/controllers/scrollview.js764-789

用法和最佳实践

在为滚动视图模式设计演示文稿时，请考虑以下几点

1. 布局注意事项:

   • 内容在滚动视图中的显示可能不同
   • 幻灯片被线性化，影响空间关系
   • 考虑片段如何在滚动过程中触发

2. 性能技巧:

   • 内容会随着您的滚动而动态加载/卸载
   • 具有许多片段的复杂幻灯片会创建更多滚动触发器
   • 自动动画在滚动视图中增加了复杂性

3. 兼容性说明:

   • 演讲者笔记在滚动视图中被禁用
   • 某些插件在滚动视图模式下的行为可能不同

来源: js/controllers/scrollview.js280-390 js/controllers/notes.js41-45 js/controllers/scrollview.js632-639

相关功能

有关其他相关视图模式的信息，请参阅

• 概览模式
• 打印和 PDF 导出