JavaScript修改文本时如何防止HTML viewport重置及Chrome下scroll-snap失效

根因说明 #

你遇到的两个问题本质上是Chrome默认的*滚动锚定（Scroll Anchoring）*机制触发导致的：

• Chrome的滚动锚定逻辑会在页面DOM内容变化时，自动调整滚动位置来保证用户正在浏览的内容不偏移，你的打字脚本持续修改splash节点内容时，Chrome错误将该节点判定为锚定目标，每次内容更新都会强制把视口拉回该节点位置，直接打断了scroll-snap的吸附流程。
• Firefox的滚动锚定判定规则和Chrome存在差异，所以不会触发该异常。
• 你当前使用的splash.innerHTML = splash.innerHTML + letters[i]写法会每次全量重绘整个splash节点内容，进一步加剧了布局抖动的问题。

具体修复步骤 #

• 第一步：给splash节点添加禁用滚动锚定的CSS属性，从根源阻止内容更新时的视口回跳

/* 替换为你的splash节点对应的选择器 */
.splash {
  overflow-anchor: none;
}

• 第二步：优化打字效果的DOM操作逻辑，避免全量重绘节点内容
  如果打字内容是纯文本，直接使用textContent追加：

while(i<letters.length) {
  await waitForMs(delay);
  splash.textContent += letters[i];
  i++;
}

如果打字内容包含HTML标签，改用文本节点追加的方式：

while(i<letters.length) {
  await waitForMs(delay);
  splash.appendChild(document.createTextNode(letters[i]));
  i++;
}

• 第三步（可选）：提前固定splash节点的尺寸，避免内容更新导致节点尺寸变化触发页面重排

.splash {
  overflow-anchor: none;
  /* 调整为你的文本最终渲染后的实际高度 */
  min-height: 120px;
  width: 100%;
}

效果验证 #

修改完成后在Chrome环境测试，滚动页面不会再被强制拉回打字节点位置，scroll-snap吸附功能即可正常触发，和Firefox表现一致。

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