滚动视图 5.0.0

¥Scroll View 5.0.0

从 reveal.js 5.0 开始，任何演示文稿都可以被视为可滚动的页面。所有动画、片段和其他功能将继续像在普通幻灯片视图中一样工作。

¥As of reveal.js 5.0 any presentation can be viewed as a scrollable page. All of your animations, fragments and other features continue to work just like they do in the normal slide view.

幻灯片是进行演示的绝佳格式，但可滚动的网页更方便观众自行阅读。

¥Slide decks are a great format for giving presentations, but scrollable web pages are easier for viewers to read on their own.

滚动视图让你无需任何额外工作即可兼得两者的优势。以最适合演示的格式呈现，以最适合使用的格式共享。

¥The scroll view gives you the best of both worlds—without any extra effort. Present in the format best suited for presenting, share in the format best suited for consumption.

垂直幻灯片怎么样？

¥What About Vertical Slides?

滚动视图将你的幻灯片展平为单个线性流。所有幻灯片都将按照创作顺序显示，水平和 垂直幻灯片 之间没有区别。

¥The scroll view flattens your deck into a single linear flow. All slides will appear in the order they were authored and there is no differentiation between horizontal and vertical slides.

入门指南

¥Getting Started

滚动视图通过使用 view: "scroll" 初始化 reveal.js 来激活。以下是它的实际演示。

¥The scroll view is activated by initializing reveal.js with view: "scroll". Here's a demo of it in action.

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

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

URL 激活

¥URL Activation

想要在不更改配置的情况下启用卡片组的滚动功能吗？编辑 URL 并将 view=scroll 附加到查询字符串。例如，以下是滚动视图中 reveal.js 的主要演示：https://reveal.nodejs.cn/demo/?view=scroll

¥Want to enable scrolling for a deck without changing its config? Edit the URL and append view=scroll to the query string. For example, here's the main reveal.js demo in scroll view:
https://reveal.nodejs.cn/demo/?view=scroll

自动激活

¥Automatic Activation

在移动设备上浏览演示文稿时，滚动视图非常有用。因此，当视口达到移动设备宽度时，我们会自动启用滚动视图。

¥The scroll view is great when browsing presentations on a mobile device. For that reason, we automatically enable the scroll view when the viewport reaches mobile widths.

这通过 scrollActivationWidth 配置值进行控制。如果你想禁用自动滚动视图，请将值设置为 null 或 0 来初始化你的演示文稿：

¥This is controlled through the scrollActivationWidth config value. If you want to disable the automatic scroll view initialize your presentation with that value set to null or 0:

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

滚动条

¥Scrollbar

我们为滚动视图中的任何演示文稿渲染自定义滚动条。此滚动条按幻灯片分段，以便用户清楚地了解幻灯片何时切换。

¥We render a custom scrollbar for any presentation in scroll view. This scrollbar is broken up by slide so that users get a clear indication of when the slide will change.

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

¥The scrollbar also shows individual fragments within your slides. Slides with fragments are given more vertical space based on how many fragments there are.

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

¥By default, the scrollbar is automatically hidden when you stop scrolling. This behavior can be configured using scrollProgress.

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

滚动捕捉

¥Scroll Snapping

滚动时，reveal.js 会自动捕捉到最近的幻灯片。之所以选择此行为作为默认行为，是因为在触摸设备上以这种方式在幻灯片之间进行 "flick" 切换非常舒适。

¥When scrolling reveal.js will automatically snap to the closest slide. This was picked as the default behavior because it's very comfortable to "flick" between slides this way on touch devices.

如果你愿意，可以将其更改为仅在使用 proximity 接近幻灯片顶部时捕捉。你还可以通过将 scrollSnap 设置为 false 来完全禁用对齐功能。

¥If you prefer, you can change it to only snap when you're close to the top of a slide using proximity. You can also disable snapping altogether by setting scrollSnap to false.

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

滚动布局（实验性）

¥Scroll Layout (experimental)

默认情况下，每张幻灯片的高度将与视口高度相同。在大多数情况下，此功能看起来很棒，但幻灯片的上方和下方可能会留出一些空白（取决于视口和幻灯片的宽高比）。

¥By default each slide will be sized to be as tall as the viewport. This looks great in most circumstances but can mean a bit of empty space above and below your slides (depending on the viewport and slide deck aspect ratio).

如果你希望布局更密集，并同时显示多张幻灯片，请将 scrollLayout 选项设置为 compact。这将使每张幻灯片的宽度与视口一致，高度与宽高比（幻灯片宽度/高度）相匹配。

¥If you prefer a more dense layout with multiple slides visible in parallel, set the scrollLayout option to compact. This will size each slide to be as wide as the viewport and as tall as it needs to match your aspect ratio (slide width/height).

你可以在下面的示例中看到两种模式之间的区别。从紧凑布局开始。

¥You can see the different between the two modes in the examples below. Starting with the compact layout.

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

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

¥Here's the same content with scrollLayout set to the default ('full').

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

示例

¥Examples

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

¥If you're looking for examples of scrollable reveal.js decks here's a great one: https://slides.com/news/scroll-mode/scroll