如何在 React 中滚动全页网站的幻灯片？

Question

我正在使用 React/TypeScript 构建一个网站。我想使用全页布局，您可以滚动浏览不同的垂直幻灯片，基本上如下所示：https://alvarotrigo.com/fullPage/#page1

但是，如果幻灯片的内容超过 100vh，则应先启用正常滚动，直到到达当前幻灯片的底部，然后切换到下一张。因此，我希望拥有整页幻灯片的美好、活泼的感觉，但如果内容无法逻辑地分布到多张幻灯片上，我也希望能够灵活地使幻灯片更长。另外，我不想在幻灯片中有可滚动的容器，我希望整个幻灯片都可以滚动。 我尝试使用 swiperjs

、

css 滚动捕捉 以及通过 intersection Observer API 手动实现此功能，但从未对结果感到真正满意。一个问题是，大型幻灯片（高于 100vh 的幻灯片）还具有可扩展元素，如手风琴或其他表单元素。因此，有时幻灯片一开始是不可滚动的，但在用户交互之后就变得可滚动了。 我确信这不是一个罕见的问题，并且想知道这里是否有人以令人满意的方式解决了这个问题。

那么 fullPage.js 有什么问题吗？

Answer 1

您可以看到

这个示例

正是您所需要的。

它使用默认选项scrollOverflow: true

，这是您实现章节和幻灯片内滚动所需的选项。

确保正确导入 CSS 和 JS 文件，并且使用最新的 fullpage.js 版本。

如果使用 React，请确保使用

React 官方组件

。