fullpage.js开启scrollOverflow时如何滚动到section内指定区块

原生锚点没法一次性完成这个跳转——开启scrollOverflow: true的section是独立的内部滚动容器，默认锚点只能触发fullpage外层的section切换，没法直接控制内部滚动，必须拆分两次滚动操作完成：

• 第一次：滚动定位到目标外层section
• 第二次：等外层section切换完成后，在该section内部滚动到指定子区块位置

首先是基础DOM结构参考：

<div class="section section__2">
  <a href="#specific-section">Scroll to specific section</a>
</div>
<div class="section section__3">
  <!-- 填充足够内容撑开内部滚动高度，方便看到滚动效果 -->
  <div>占位内容</div>
  <div>占位内容</div>
  <div>占位内容</div>
  <div>占位内容</div>
  <div>占位内容</div>
  <div>占位内容</div>
  <div data-anchor="specific-section">需要自动滚动定位到的目标内容</div>
</div>

踩坑提示：不要在section切换动画执行过程中触发内部滚动，此时滚动容器的位置、高度计算都不准确，会出现定位偏移。

具体实现可以直接绑定fullpage的生命周期回调完成，代码如下：

// 拦截锚点的默认跳转行为
const triggerEl = document.querySelector('a[href="#specific-section"]')
triggerEl.addEventListener('click', (e) => {
  e.preventDefault()
  // 第一步：先调用fullpage API切换到目标section，索引从1开始计数，第三个section对应序号为3
  fullpage_api.moveTo(3)
})

// fullpage初始化时配置回调
new fullpage('#fullpage', {
  scrollOverflow: true,
  // 等section完全加载、过渡动画结束后触发内部滚动
  afterLoad: (origin, destination) => {
    // 校验当前加载的是目标section
    if (destination.index !== 2) return
    // 取到fullpage自动生成的内部滚动容器（开启scrollOverflow后会给容器加fp-scrollable类名）
    const innerScrollBox = destination.item.querySelector('.fp-scrollable')
    // 取到内部要定位的目标元素
    const targetBlock = destination.item.querySelector('[data-anchor="specific-section"]')
    if (!innerScrollBox || !targetBlock) return
    // 第二步：执行内部滚动到目标位置
    innerScrollBox.scrollTo({
      top: targetBlock.offsetTop,
      behavior: 'smooth'
    })
  }
})

如果不需要平滑滚动，把behavior改成auto就行，偏移量如果需要留顶部间距，直接在targetBlock.offsetTop基础上减去对应像素值即可。

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