按理说，

背景

项目使用 React + flex-direction: column-reverse 实现聊天列表。消息按"最新在 DOM 头部"的顺序渲染，配合 column-reverse 使最新消息自然出现在视觉底部。话说回来，

DOM 顺序: 视觉顺序: scrollTop: = 视觉底部

scrollToBottom 的主要原因很简单：

chatList.scrollTo;

在 Chrome / Android 上运行完全正常。但在 iOS 以下真机上，机器人流式回复时消息列表始终停在原地，使用者看不到新内容。

根本原因深度分析

iOS WKWebView 的滚动架构

iOS Safari 的滚动不是纯 DOM 驱动，而是双层架构：

┌─────────────────────────────────────┐│ JavaScript / DOM Layer ││ element.scrollTop ││ ↕ 异步镜像 ││ UIScrollView.contentOffset ││ │└─────────────────────────────────────┘

正常情况下写入 scrollTop → WebKit 同步更新 UIScrollView.contentOffset → 视觉位置改变。

iOS 以下的 Bug：Scroll Anchoring 漂移

在 column-reverse 容器中，React 流式输出时不断在 children 前插入或更新内容。每次 mutation 触发 WebKit layout，layout 结束后会执行 scroll anchoring。

1. 新内容插入 → WebKit 重新 layout
2. UIScrollView.contentOffset 被错误重置/漂移
3. 但 DOM Layer 的 scrollTop 读值仍然是

说到结果就是，scrollTop 读出来是 但使用者眼睛看到的并不是底部。

为什么 scrollTo 无法修复

执行 scrollTo 时： 读取当前 scrollTop = 目标 top = current == target → 浏览器认为无需操作 → 跳过对 UIScrollView 的更新

Native Layer 的漂移永远得不到纠正。

为什么 scrollTop = 的扰动也失败

标准 column-reverse 合法范围：写入 scrollTop = → 超出上界 → 被 clamp 回 DOM Layer仍然是 → UIScrollView 不更新

最终方法

主要思路

用一个合法的负值扰动。强制让 DOM Layer 从 变为 -使 WebKit 感知到"位置发生了变化"，触发对 UIScrollView 的更新。 不过，再用第二个 RAF 即时归零。

// 第一个 RAF：chatList.scrollTop = -;不过，// 合法负值扰动。强制 DOM Layer状态变化// 第二个 RAF：requestAnimationFrame => { chatList.scrollTop =;// 即时归零，不用 smooth});

关键细节

问题旧方案新方案 perturbation 值scrollTop = scrollTop = -scrollTop = - 滚动方式直接赋值 scrollTop =直接赋值 scrollTop = - 时序同一帧两帧同一帧两帧。下一帧即时归零 DOM mutationsmoot被取消即时赋值不可取消