如何将iframe内点击坐标转换为父页面坐标（解决滚动偏移问题）

核心问题 #

你当前依赖postMessage传递的scrollY值可能未正确同步iframe的实际滚动状态，导致滚动偏移计算失效。正确做法是直接从iframe的contentWindow获取内部滚动距离，而非依赖外部传递的值。

修正后的代码 #

useEffect(() => {
  const handleMessage = (event: MessageEvent) => {
    if (event.data.type === 'toolInfo' && footprintsOn) {
      const iframe = document.getElementById('titanpad') as HTMLIFrameElement;
      if (!iframe.contentWindow) return; // 确保iframe已加载完成

      const iframeRect = iframe.getBoundingClientRect();
      const { x: iframeViewportX, y: iframeViewportY } = iframeRect;
      // 直接从iframe内部获取真实滚动距离
      const iframeScrollTop = iframe.contentWindow.scrollY;
      
      // 计算点击点相对于iframe视口的真实位置（抵消滚动偏移）
      const clickRelativeToIframeViewportY = event.data.data.coordinates.y - iframeScrollTop;
      
      // 信息方块基于父视口定位（假设用fixed布局）
      const newX = event.data.data.coordinates.x + iframeViewportX;
      let newY = clickRelativeToIframeViewportY + iframeViewportY;

      // 确保方块完全显示在父视口内
      const toolInfoSquareHeight = 100; // 替换为你方块的实际高度
      const viewportBottom = window.innerHeight;
      if (newY + toolInfoSquareHeight > viewportBottom) {
        newY = viewportBottom - toolInfoSquareHeight;
      }
      if (newY < 0) {
        newY = 0;
      }

      event.data.data.coordinates = { x: newX, y: newY };
      setToolInfoSquareData(event.data);
      setOpenToolInfo(true);
    } 
  };

  window.addEventListener('message', handleMessage);

  return () => {
    window.removeEventListener('message', handleMessage);
  };
}, [footprintsOn]);

关键修正点 #

1. 获取真实滚动值：用iframe.contentWindow.scrollY直接读取iframe内部的垂直滚动距离，避免依赖postMessage传递的可能失效数据。
2. 抵消滚动偏移：iframe滚动后，内部元素的相对位置会向上偏移scrollTop，因此需要用原始点击y坐标减去scrollTop，得到点击点相对于iframe视口顶部的真实位置。
3. 视口边界适配：根据信息方块的实际高度调整最终位置，确保它不会超出父视口的顶部或底部。

禁止父页面滚动的额外处理 #

给iframe添加CSS样式，阻止滚动事件冒泡到父页面：

#titanpad {
  overscroll-behavior: contain;
}

这个属性会让iframe滚动到边缘时，不会触发父页面的滚动行为，完全满足你仅让iframe滚动的需求。

内容的提问来源于stack exchange，提问作者Unique Rax Law