Svelte开发网站IOS端无法滚动 桌面与安卓端正常

兄弟，你猜的没错！这个iOS滚动失效的问题确实和你用CSS关键帧修改body的overflow属性有关——iOS Safari在处理这种动画驱动的overflow变化时存在兼容性bug，而安卓端的浏览器（比如Chrome）能正确识别属性变化，所以才会出现两端表现不一致的情况。

问题根源 #

iOS Safari的CSS引擎不会正确处理通过关键帧动画修改body的overflow属性：即使动画结束后样式显示为overflow-y: visible，浏览器内部的滚动状态依然被锁定在overflow: hidden的状态，导致页面无法向下滚动。

修复方案 #

推荐用JavaScript直接控制overflow属性，替代CSS动画的方式，这样能绕过iOS的兼容性问题，同时更灵活可控：

方案1：JavaScript定时解锁滚动（适配你的6秒动画场景）

在Svelte组件的onMount钩子中，手动设置初始滚动锁定，再在动画结束时间点解锁：

import { onMount } from 'svelte';

onMount(() => {
  // 启动时锁定滚动
  document.body.style.overflow = 'hidden';
  
  // 6秒后解锁（和你的动画时长匹配）
  const unlockTimer = setTimeout(() => {
    // 推荐用auto而非visible，auto在内容超出时才显示滚动条，更符合常规需求
    document.body.style.overflow = 'auto';
  }, 6000);

  // 组件销毁时清理定时器，避免内存泄漏
  return () => clearTimeout(unlockTimer);
});

方案2：结合CSS类与JavaScript切换（适合需要配合其他动画效果的场景）

如果还需要保留启动页的过渡动画，可以把滚动锁定逻辑抽成类名，用JavaScript控制类的切换：

1. 先定义CSS类：

body.scroll-locked {
  overflow: hidden;
  /* 这里可以加其他启动页动画样式，比如opacity、transform等 */
}

2. 在Svelte中控制类名：

import { onMount } from 'svelte';

onMount(() => {
  document.body.classList.add('scroll-locked');
  
  const unlockTimer = setTimeout(() => {
    document.body.classList.remove('scroll-locked');
  }, 6000);

  return () => clearTimeout(unlockTimer);
});

额外说明 #

为什么原来的CSS动画方式不行？因为iOS Safari在执行CSS关键帧动画时，不会对overflow这种影响布局的属性触发完整的重排重绘，导致滚动容器的状态没有被正确更新。而JavaScript直接修改DOM样式或类名，会强制浏览器重新计算布局和滚动状态，就能避免这个bug。

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