使用MapBox与Scrollama创建粘性地图的滚动退出问题求助

问题根源 #

你的DOM结构中#map和#story是同级元素，position: sticky的地图会一直固定在视口顶部，直到它自身在文档流中的位置被完全滚出。但#map高度设为100vh，后续的#story滚动完成后，地图仍会占据视口，挡住下方的#outro。

推荐方案：调整容器结构（无跳动、兼容性好） #

通过将地图和故事内容放入同一个容器，让粘性地图随容器滚动而退出视口，是最稳定的解决方式：

1. 修改HTML结构 #

<div id="intro"></div>
<div class="scroll-container">
  <div id="map"></div>
  <div id="story">
    <!-- 你的滚动步骤元素，比如每个.step占100vh -->
    <div class="step">步骤1</div>
    <div class="step">步骤2</div>
    <div class="step">最后一步</div>
  </div>
</div>
<div id="outro"></div>

2. 配置CSS样式 #

/* 容器设置足够高度，等于所有滚动步骤的总高度 */
.scroll-container {
  position: relative;
  height: calc(var(--step-count) * 100vh);
}

#map {
  position: sticky;
  position: -webkit-sticky; /* 兼容Safari */
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 1; /* 确保地图在故事内容下方 */
}

#story {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2; /* 让故事内容在地图上方滚动 */
}

/* 每个滚动步骤占满视口高度 */
.step {
  height: 100vh;
  /* 可添加内容排版样式，比如 padding、背景半透明等 */
}

#intro, #outro {
  /* 按需设置高度，比如100vh */
  height: 100vh;
}

3. 用JS动态计算步骤数量 #

在初始化Scrollama前，给容器设置步骤数量的CSS变量：

// 计算滚动步骤的总数
const stepCount = document.querySelectorAll('#story .step').length;
document.querySelector('.scroll-container').style.setProperty('--step-count', stepCount);

// 初始化Scrollama
const scroller = scrollama();
scroller.setup({
  step: '#story .step',
  offset: 0.5, // 按需调整触发位置
  debug: false
})
.onStepEnter(response => {
  // 在这里处理地图的动态变化（比如飞至指定区域、更新图层等）
})
.onStepExit(response => {
  // 按需处理步骤退出逻辑
});

备选方案：通过Scrollama事件修改地图定位 #

如果不想调整DOM结构，可以监听最后一个步骤的退出事件，动态修改地图的定位属性：

const scroller = scrollama();
const mapEl = document.getElementById('map');
const stepEls = document.querySelectorAll('#story .step');

scroller.setup({
  step: '#story .step',
  offset: 0.5
})
.onStepExit(response => {
  // 检测是否滚动到最后一个步骤
  if (response.index === stepEls.length - 1) {
    // 移除粘性定位，改为相对定位，让地图回到文档流
    mapEl.style.position = 'relative';
    // 可选：调整地图高度，避免占据过多空间
    mapEl.style.height = 'auto';
    mapEl.style.minHeight = '100vh';
  }
});

注意：这种方案可能会出现滚动跳动，需要根据不同设备调整定位参数，兼容性不如容器方案。

内容的提问来源于stack exchange，提问作者robcat26