水平滚动粘性部分

Question

在我要构建的网站上，我想在页面中间集成水平position: sticky;滚动部分。该页面具有垂直滚动。用户可以使用页面的垂直自然滚动将部分从A滚动到Z。

我找到了一个我想要实现的完美示例：https://nlkyt.csb.app

我在此主题上找不到任何资源。有谁知道如何创造这种效果？

谢谢！

Answer 1

偶然发现this blog post时，我正在寻找类似的效果。总结起来，您需要三个容器，我们可以将其称为：

1. 空格键-此容器将保留垂直空间滚动空间。详情请见下文。
2. 粘性-此容器将具有设定的高度（在我的示例中为100vh）。也将是position: sticky; top: 0;。
3. 水平-此容器将包含您希望水平滚动的内容。其宽度将由其包含的内容决定。

要获得理想的效果，必须将“ spaceholder”的高度设置为“ horizo​​ntal”的宽度。然后，在滚动时，您必须水平翻译“水平”，等于“粘滞”的偏移顶部。

如果您使用的是React，请按照上面的博客文章进行操作。如果您想要我制作的香草JavaScript版本check out this codepen。