Ionic 6 & Vue 3：Ion-Modal调用scrollIntoView()固定头部被隐藏问题

• 你当前使用的原生scrollIntoViewAPI默认操作全局根滚动容器，没有和Ionic的组件滚动逻辑做适配。
• 新版本Ionic（含Vue/React适配版、更高版本的Angular版）中，ion-content是基于Shadow DOM封装的独立滚动上下文，固定定位的ion-header悬浮在ion-content滚动区域上方，不属于滚动容器的内部元素。原生scrollIntoView计算滚动位置时，不会扣除固定header的高度，直接将目标元素对齐到视口最顶部，最终把固定header挤出可视区域。
• Ionic 4 Angular版本中ion-content未做严格的Shadow DOM隔离，滚动容器直接复用全局window对象，且自动给滚动区域加了对应header高度的顶部内边距，原生滚动方法刚好能正常计算位置，所以不会出现这个问题。

不要直接调用原生DOM的滚动方法，改用Ionic官方提供的ion-content内置滚动API，组件会自动计算固定头部的偏移量，从根源避免遮挡/挤出header的问题。

1. 首先给模板中的ion-content添加模板引用标识，方便获取组件实例：

<template>
  <ion-modal>
    <ion-header>
      <ion-toolbar>
        <!-- Close modal button -->
      </ion-toolbar>
      <ion-searchbar />
      <div>
        <!-- Vertical column of scroll to anchor tags -->
        <a @click="scrollTo('Math')">
          <ion-icon :icon="calculator"/>
        </a>
      </div>
    </ion-header>
    
    <ion-content ref="contentRef">
      <ion-list>
        <ion-list-header id="Math">
          <ion-label>
            Math
          </ion-label>
        </ion-list-header>
      </ion-list>
    </ion-content>
  </ion-modal>
</template>

2. 重写scrollTo方法，调用ion-content的官方滚动方法：

// 注意根据你用的框架引入对应ref方法，React用useRef，Vue用ref
import { ref } from 'vue'
import type { HTMLIonContentElement } from '@ionic/vue'

const contentRef = ref<HTMLIonContentElement | null>(null)

async function scrollTo (category: string) {
  const elementId = category.replace(' ', '')
  const targetElement = document.getElementById(elementId)
  if (!targetElement || !contentRef.value) return

  // 计算目标元素相对于滚动容器的顶部偏移
  const targetOffsetTop = targetElement.offsetTop
  // 调用组件内置滚动方法，三个参数分别为x轴偏移、y轴偏移、动画时长(ms)
  // 组件内部自动预留固定header的高度，不会把header挤出可视区
  await contentRef.value.scrollToPoint(0, targetOffsetTop, 500)
}

如果你用的是Ionic React，只需要把模板ref的写法换成React的useRef即可，滚动API的调用逻辑完全一致。

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