修改文本时页面自动滚动的问题解决方案

我有一个主页面（<div>元素，设置高度为80vh），其下方有一个<hr>元素和一个包含信息的<div>元素。主页面内的标题由JavaScript代码修改，在低屏幕宽度下，标题文本会从一行变为两行；当文本从两行变回一行时，尽管标题所在容器高度保持不变，页面仍会向上滚动——打印document.documentElement.scrollTop可看到变化值恰好为一行文本的高度。

我希望阻止这种滚动行为。目前可以通过修改文本前记录scrollTop值、修改后再恢复的方式临时解决，但更希望获得更简洁、非临时的修复方案。我已通过开发者工具和JavaScript代码检查所有元素的高度，确认它们并未发生变化。

关键代码 #

CSS

html {
  background-color: #F76E2A;
}

body {
  margin: 0;
  min-height: 100%;
}

#top-bar {
  position: sticky;
  top: 0;
  height: 2.5rem;
  background-color: #222327;
  display: flex;
  z-index: 100;
  box-shadow: 0 0 7px 7px #F76E2A;
}

#home-page {
  height: 80vh;
}

hr {
  height: 5px;
  width: 80%;
  max-width: 700px;
  color: #222327;
  background-color: #222327;
  border-radius: 2px;
  margin: 3rem auto
}

#projects-showcase {
  margin-bottom: 6rem;
}

HTML

<div id="top-bar">stuff</div>
<div id="home-page">the title that changes size</div>
<hr>
<div id="projects-showcase">The elements that contain information</div>

方案1：禁用浏览器滚动锚定行为 #

你遇到的问题是浏览器**滚动锚定（Scroll Anchoring）**机制导致的——该机制会在页面元素内容/尺寸变化时，自动调整滚动位置以保持内容可见性。只需在全局或目标元素上禁用该行为即可：

/* 全局禁用，覆盖整个页面 */
html {
  overflow-anchor: none;
}

/* 或仅针对标题所在容器禁用 */
#home-page {
  overflow-anchor: none;
}

这是浏览器原生支持的属性，无需额外JS代码，直接从根源阻止不必要的滚动调整。

方案2：固定容器排版上下文 #

如果方案1不生效，可以给标题容器添加明确的布局约束，让文本行数变化完全在容器内部处理，避免触发浏览器滚动调整：

#home-page {
  height: 80vh;
  display: flex;
  align-items: flex-start; /* 可根据需求调整为center/end等 */
}

通过Flex布局固定容器的对齐规则，消除文本换行对全局滚动的影响。

方案3：限制JS修改时的重排范围 #

如果是JS修改文本时的即时重排触发滚动，可以临时限制重排范围：

// 修改前限制重排仅在body内部
document.body.style.contain = 'layout';
// 执行标题修改操作
document.querySelector('#home-page').textContent = '新标题内容';
// 恢复正常重排
document.body.style.contain = '';

利用CSS的contain属性缩小重排影响范围，避免全局滚动被意外触发。

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