window.scrollTo导致Material UI Menu组件定位异常求助

核心原因 #

window.scrollTo的平滑滚动是异步执行的，而MUI的Menu组件默认会在打开时基于当前滚动位置计算锚点元素的坐标。如果滚动还没完成就触发Menu打开，Menu会用滚动前的旧位置计算定位，导致偏移。

解决方案 #

1. 改用scrollIntoView（推荐）

放弃window.scrollTo，直接用DOM元素的scrollIntoView方法，它更贴合元素的滚动行为，MUI的内部监听能正确捕获位置变化：

// 用ref绑定ProductCarousel组件
const carouselRef = useRef(null);

// Banner按钮的点击事件
const scrollToCarousel = () => {
  carouselRef.current?.scrollIntoView({
    behavior: 'smooth', // 平滑滚动
    block: 'start' // 滚动到元素顶部对齐
  });
};

// 在ProductCarousel上挂载ref
<ProductCarousel ref={carouselRef} />

2. 滚动完成后强制更新Menu定位

如果必须保留window.scrollTo，就在滚动结束后手动触发Menu更新位置：

const menuRef = useRef(null);
const carouselOffset = 800; // 你的目标滚动距离

const scrollToCarousel = () => {
  window.scrollTo({
    top: carouselOffset,
    behavior: 'smooth'
  });

  // 监听滚动结束，防抖避免频繁触发
  let scrollTimer;
  const handleScrollEnd = () => {
    clearTimeout(scrollTimer);
    scrollTimer = setTimeout(() => {
      // 调用MUI Menu的updatePosition方法重新计算定位
      menuRef.current?.updatePosition();
      window.removeEventListener('scroll', handleScrollEnd);
    }, 100);
  };
  window.addEventListener('scroll', handleScrollEnd);
};

// 给Menu组件绑定ref
<Menu ref={menuRef} anchorEl={anchorEl} open={open} onClose={handleClose}>
  {/* 菜单选项 */}
</Menu>

3. 手动传递锚点位置给Menu

在点击Add to Cart按钮时，手动获取按钮的实时坐标，传给Menu的anchorPosition属性，绕过自动计算：

const [anchorPosition, setAnchorPosition] = useState(null);
const [open, setOpen] = useState(false);

const handleOpenMenu = (event) => {
  // 获取按钮当前的视口坐标
  const rect = event.currentTarget.getBoundingClientRect();
  setAnchorPosition({
    top: rect.bottom,
    left: rect.left
  });
  setOpen(true);
};

<Menu
  open={open}
  onClose={() => setOpen(false)}
  anchorPosition={anchorPosition}
  anchorReference="anchorPosition"
>
  {/* 菜单内容 */}
</Menu>

优先尝试第一种方案，最省心；如果仍有问题，再测试第二种或第三种。

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