滚动视图 5.0.0

从 reveal.js 5.0 起，任何演示文稿都可以作为一个可滚动的页面查看。你的动画、片段和其他功能就像在普通的幻灯片视图中一样继续正常工作。

幻灯片非常适合进行演讲，但可滚动的网页更利于观众自己阅读。

滚动视图为你提供了两个世界的*优良选择*——无需任何额外的努力。以最适合演示的格式进行演示，以最适合浏览的格式共享。

垂直幻灯片呢？

滚动视图将您的幻灯片压平为单一线性流程。所有幻灯片将按撰写顺序显示，并且在横向和纵向幻灯片之间没有区别。

入门

可以通过使用view: "scroll"初始化 reveal.js 来激活滚动视图。这是一个正在运行的演示。

Reveal.initialize({
  // Activate the scroll view
  view: 'scroll',

  // Force the scrollbar to remain visible
  scrollProgress: true,
});

URL 激活

是否希望不更改幻灯片的配置即可启用滚动？编辑 URL，并将view=scroll附加到查询字符串。例如，这是滚动视图中的主 reveal.js 演示
https://revealjs.npmjs.net.cn/demo/?view=scroll

自动激活

在移动设备上浏览演示文稿时，滚动视图非常棒。出于这个原因，当视口达到移动设备宽度时，我们自动启用滚动视图。

这通过scrollActivationWidth配置值加以控制。如果您希望禁用自动滚动视图，请使用将此值设置为null或0来初始化您的演示文稿

Reveal.initialize({
  scrollActivationWidth: null,
});

滚动条

我们会为滚动视图中的任何演示文稿呈现自定义滚动条。此滚动条按幻灯片划分，以便用户可以明确了解幻灯片何时会更改。

滚动条还会显示幻灯片中的各个片段。包含片段的幻灯片会根据片段的多少获得更多垂直空间。

默认情况下，当您停止滚动时，滚动条会被自动隐藏。可以使用scrollProgress来配置此行为。

// - auto:     Show the scrollbar while scrolling, hide while idle
// - true:     Always show the scrollbar
// - false:    Never show the scrollbar
scrollProgress: 'auto';

滚动对齐

在滚动时，reveal.js 会自动对齐到最接近的幻灯片。之所以选择此默认行为，是因为以这种方式在触控设备上“轻弹”幻灯片非常方便。

如果您愿意，可以使用proximity将其更改为仅在接近幻灯片顶部时才对齐。您还可以通过将scrollSnap设置为false在整体上禁用对齐。

// - false:      No snapping, scrolling is continuous
// - proximity:  Snap when close to a slide
// - mandatory:  Always snap to the closest slide
scrollSnap: 'mandatory';

滚动布局（实验性）

默认情况下，每个幻灯片的大小都将调整为与视口一样高。在大多数情况下，这看起来不错，但可能会在幻灯片（取决于视口和幻灯片组的宽高比）的顶部和底部留一些空白区域。

如果您更喜欢在并行显示多个幻灯片的条件下采用更紧凑的布局，请将scrollLayout选项设置为compact。这将调整幻灯片大小，使其宽度与视口一样宽，高度与宽高比（幻灯片宽度/高度）匹配。

您可以在下面的示例中查看两种模式之间的不同。从紧凑型布局开始。

Reveal.initialize({
  view: 'scroll'
  scrollLayout: 'compact'
});

以下是将scrollLayout设置为默认值 ('full') 的相同内容。

Reveal.initialize({
  view: 'scroll'
  scrollLayout: 'full' // this is the default value
});

示例

如果您正在寻找可滚动 reveal.js 组的示例，这里有一个很棒的示例：https://slides.com/news/scroll-mode/scroll