无库实现整页滚动：iOS端问题及scrollIntoView优化诉求

一、修复CSS Scroll-Snap在iOS的核心问题 #

1. 解决容器滚动与窗口滚动冲突（卡顿问题） #

给滚动容器添加以下CSS规则，明确滚动行为并适配iOS视口：

.scroll-container {
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  /* 明确告知浏览器容器处理垂直触摸滚动，避免误判为窗口滚动 */
  touch-action: pan-y;
  /* 阻止滚动溢出到窗口，避免触发浏览器弹性滚动 */
  overscroll-behavior-y: contain;
  /* 替换100vh，用svh适配Safari动态视口，排除底部栏高度 */
  height: calc(100svh - env(safe-area-inset-bottom));
  /* 预留安全区域，避免内容被底部栏遮挡 */
  padding-bottom: env(safe-area-inset-bottom);
}

.scroll-section {
  scroll-snap-align: start;
  /* 章节高度匹配容器，确保完全占满视口 */
  height: calc(100svh - env(safe-area-inset-bottom));
  box-sizing: border-box;
}

2. 解决Safari底部搜索栏不隐藏问题 #

若容器滚动仍无法触发底部栏隐藏，直接将scroll-snap绑定到window级：

html {
  scroll-snap-type: y mandatory;
  overflow-y: auto;
}

section {
  scroll-snap-align: start;
  height: 100svh;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}

此方案利用原生窗口滚动触发Safari底部栏自动隐藏，同时svh确保章节高度适配动态视口。

二、改进JS自动滚动方案（替代苛刻的scroll事件阈值） #

使用IntersectionObserver实现无感章节对齐，无需依赖固定滚动阈值，支持上下滚动切换：

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      const sections = document.querySelectorAll('section');
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          // 当章节进入视口超过50%时，自动对齐到顶部
          if (entry.isIntersecting && entry.intersectionRatio > 0.5) {
            entry.target.scrollIntoView({
              behavior: 'smooth',
              block: 'start'
            });
          }
        });
      }, {
        threshold: 0.5,
        rootMargin: '0px 0px -50% 0px' // 调整触发区域，避免频繁触发
      });

      sections.forEach(section => observer.observe(section));

      // 组件卸载时销毁观察者，避免内存泄漏
      onUnmounted(() => {
        sections.forEach(section => observer.unobserve(section));
      });
    });
  }
}

三、Vue3替代React componentDidUpdate的方案 #

1. 通用组件更新监听 #

使用onUpdated钩子，对应React的componentDidUpdate，组件每次更新后自动触发：

import { onUpdated } from 'vue';

export default {
  setup() {
    onUpdated(() => {
      // 组件更新后执行的逻辑，比如重新校准滚动位置
      console.log('组件已完成更新');
    });
  }
}

2. 精准监听响应式数据变化 #

若需监听特定props或状态变化，使用watch实现精准触发：

import { watch, ref } from 'vue';

export default {
  props: ['activeSectionId'],
  setup(props) {
    const activeSectionId = ref(props.activeSectionId);

    // 监听props变化，触发对应章节滚动
    watch(() => props.activeSectionId, (newId) => {
      activeSectionId.value = newId;
      const targetSection = document.getElementById(`section-${newId}`);
      targetSection?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });
  }
}

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