Material UI 移动端叠加Drawer组件时内部锚点链接跳转失效问题

问题根因 #

主流组件库的移动端Drawer为了实现独立的滚动体验，默认会给内部内容容器添加overflow: auto属性，形成独立的滚动上下文。原生锚点跳转默认只会触发根页面<html>/<body>的滚动，无法识别到Drawer内部的独立滚动容器，因此会出现跳转失效的情况。

可行解决方案 #

方案1：替换原生锚点为手动滚动逻辑（最稳妥，兼容性最好） #

废弃a标签原生跳转逻辑，改用点击事件手动控制滚动，示例代码如下：

// 导航项点击事件处理函数
const handleNavClick = (headingSlug) => {
  const targetEle = document.getElementById(headingSlug);
  if (!targetEle) return;

  // 替换为实际业务里的滚动容器选择器：跳转目标在页面主内容区就选页面滚动容器，在Drawer内部就选Drawer的内容容器
  const scrollContainer = document.querySelector('.main-page-scroll-container');

  // 计算目标元素相对于滚动容器的偏移量
  const containerOffsetTop = scrollContainer.getBoundingClientRect().top;
  const targetOffsetTop = targetEle.getBoundingClientRect().top;
  const scrollToTop = scrollContainer.scrollTop + (targetOffsetTop - containerOffsetTop);

  // 执行滚动
  scrollContainer.scrollTo({
    top: scrollToTop,
    behavior: 'smooth'
  });

  // 可选：手动更新url hash，不触发原生滚动
  history.pushState(null, null, `/lessons/lesson-slug#${headingSlug}`);
}

方案2：保留原生锚点能力的配置调整 #

如果不想修改原有跳转逻辑，可同时调整以下配置：

• 移除Drawer内容容器的overflow: auto属性，将滚动权限交还给根页面，同步调整Drawer的定位和z-index，避免滚动时出现样式异常
• 检查Drawer组件是否默认阻止了内部a标签的默认点击事件，如有需要移除事件拦截逻辑
• 你之前传入的disablePortal: true会将Drawer渲染到父组件节点而非body根节点，如果你要跳转的目标元素在Drawer外部，需要将该参数改为false，保证锚点链接和目标元素处于同一滚动上下文

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