谷歌地图标记点击后，如何阻止主滚动条随锚点聚焦下滑？

问题核心 #

点击地图标记或锚点链接聚焦对应卡片时，浏览器默认会触发主页面滚动到目标元素位置，而你需要仅让卡片所在的容器滚动，同时锁定主滚动条的位置。

解决方案步骤 #

1. 阻止锚点默认行为
   锚点链接的href="#xxx"会触发浏览器自动滚动到目标元素，必须先阻止这个默认动作，避免主滚动条移动。

2. 手动控制容器内滚动
   找到目标卡片后，调用scrollIntoView()让它在自身的滚动容器内滚动到可视区域，而非整个页面。

3. 聚焦元素时禁止页面滚动
   使用focus({ preventScroll: true })给卡片添加焦点，同时避免触发主页面滚动。

具体代码实现 #

处理锚点链接的点击事件

// 绑定所有标记/锚点链接的点击事件
document.querySelectorAll('.marker-link').forEach(link => {
  link.addEventListener('click', (e) => {
    // 阻止默认锚点跳转，避免主页面滚动
    e.preventDefault();
    
    // 获取目标卡片ID
    const targetId = link.getAttribute('href').slice(1);
    const targetCard = document.getElementById(targetId);
    
    if (targetCard) {
      // 让卡片在其滚动容器内平滑滚动到顶部
      targetCard.scrollIntoView({ 
        behavior: 'smooth', 
        block: 'start',
        inline: 'nearest'
      });
      
      // 给卡片添加焦点，同时阻止页面滚动
      targetCard.focus({ preventScroll: true });
    }
  });
});

处理Google Maps标记的点击事件

// 假设你已创建Google Maps标记实例
marker.addListener('click', () => {
  const targetCard = document.getElementById('card-j'); // 替换为对应卡片ID
  const cardContainer = document.getElementById('card-container'); // 卡片所在的滚动容器

  if (targetCard && cardContainer) {
    // 手动计算容器内的滚动位置，让卡片可见
    const scrollPosition = targetCard.offsetTop - cardContainer.offsetTop;
    cardContainer.scrollTo({
      top: scrollPosition,
      behavior: 'smooth'
    });
    
    // 聚焦卡片，禁止页面滚动
    targetCard.focus({ preventScroll: true });
  }
});

关键说明 #

• e.preventDefault()：彻底阻止锚点触发的主页面滚动行为。
• scrollIntoView()：通过配置参数，确保滚动仅发生在卡片的父容器内（前提是父容器设置了overflow: auto或scroll）。
• focus({ preventScroll: true })：满足可访问性需求的同时，避免浏览器因聚焦元素而滚动主页面。

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