使用 MapBox 和 Scrollama 创建“粘性”地图

Question

我正在尝试使用 MapBox 和 Scrollama 创建一个“粘性”地图。具体来说，我希望能够按照以下顺序向下滚动：

1. 简介：叙述内容
2. 动态 MapBox 地图，在故事元素中定义滚动步骤，固定到位，直到所有步骤完成
3. outro：更多叙事内容

我的文档结构如下：

<div id="intro"></div>
<div id="map"></div>
<div id="story"></div>
<div id="outro"></div>

我将 MapBox 地图的样式设置如下：

#map {
            position: sticky;
            top: 0;
            height:100vh;  
            width:100%;
        }

这适用于第 1 部分和第 2 部分（简介和地图/故事），但是一旦我滚动浏览了地图中的所有步骤，我只能在地图上滚动一行，而且看不到任何内容“outro”中的内容。有什么想法可以让我能够从地图上滚动到其他内容吗？

我尝试了以下方法：

• 设置

  bottom: 0 

  ，但这有效地将地图定位为“相对”并将地图与滚动内容分开。
• 使用 .onStepExit 回调将地图从固定更改为相对，但在多个平台上获得像素定位是一场噩梦
• 使用 iFrame，但这取决于用户手动将地图定位在屏幕中央

Answer 1

经过近一周的折腾，我在发布这篇文章后几分钟就找到了答案，基于查看来自 SF Chronicle 的代码。我发誓这些在线论坛具有超自然能力。当我将标签分为 和 部分后，一切都按预期进行。

<main id="project-wrapper">
<div id="intro"></div>
<div id="map"></div>
<div id="story"></div>
</main>

<footer>
<div id="outro"></div>
</footer>