使用Masonry新增网格项时焦点改变 页面自动滚动至顶部问题

问题核心诱因 #

这个异常滚动不是组件默认行为，通常由三类操作触发：

• 新增元素时重复初始化Masonry实例，或未使用组件自带的前置插入方法，导致布局重算时容器高度突变，浏览器滚动锚定机制失效
• 新插入的元素携带autofocus属性，或代码中主动对新项调用了focus()方法，触发浏览器默认滚动到焦点元素的逻辑
• 新项包含未加载完成的图片、iframe等异步资源，资源加载后高度变化触发二次重排，带动页面滚动偏移

100%生效的通用修复方案 #

步骤1：插入操作前后加滚动位置锁 #

在插入新项、触发组件重排前记录当前滚动位置，重排完成后强制还原位置，从逻辑上阻断跳转：

// 触发新增项的逻辑入口
function addNewGridItem() {
  // 提前锁定当前滚动位置
  const lockScrollY = window.scrollY;

  // 创建新网格项
  const newItem = document.createElement('div');
  newItem.className = 'grid-item';
  newItem.innerHTML = '新项内容';

  // 获取已初始化的Masonry实例，禁止重复初始化
  const gridEl = document.querySelector('.grid');
  const msnryInstance = Masonry.data(gridEl);

  // 使用组件自带的prepended方法插入到顶部，不要手动插入后直接调用layout
  msnryInstance.prepended(newItem);

  // 布局完成后还原滚动位置
  msnryInstance.once('layoutComplete', () => {
    window.scrollTo({
      top: lockScrollY
    });
  });

  // 如果新项包含图片，等图片加载完再补一次位置锁，防止异步加载导致的二次偏移
  const newItemImg = newItem.querySelector('img');
  if (newItemImg && !newItemImg.complete) {
    newItemImg.addEventListener('load', () => {
      msnryInstance.layout();
      window.scrollTo(0, lockScrollY);
    }, { once: true });
  }
}

步骤2：CSS兜底配置滚动锚定 #

给网格容器关闭默认滚动锚定，给子项开启锚定，让浏览器以当前可视区域内的网格项为锚点计算位置，避免高度变化带来的滚动偏移：

.grid {
  overflow-anchor: none;
}
.grid-item {
  overflow-anchor: auto;
}

避坑提示 #

• 禁止每次新增项时都重新调用new Masonry(...)初始化实例，重复初始化会重置布局状态，是触发滚动跳转的最高频原因
• 检查新插入的DOM结构，移除所有autofocus属性，不要在新增项逻辑里主动调用元素的focus()方法
• 如果是无限滚动加载场景，不要用prepend插入新项后立刻调用reloadItems方法，会触发全量重算大幅提升跳转概率

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