我的页面中有一个 iframe,当我单击它时,我会显示一个包含信息的小方块。问题是 iframe 通过发布消息给出的坐标是正确的,除非在其中滚动,因为坐标大于父视图高度。我想知道如何进行计算以便将其显示在正确的位置。
我已经尝试使用客户端矩形和滚动坐标来计算 newY 。问题是滚动坐标始终为 0,因此不会对计算产生影响。这是我的使用效果:
useEffect(() => {
const handleMessage = (event: MessageEvent) => {
if (event.data.type === 'toolInfo' && footprintsOn) {
const iframe = document.getElementById('titanpad') as HTMLIFrameElement;
const iframeRect = iframe.getBoundingClientRect();
const { x: iframeX, y: iframeY } = iframeRect;
const iframeScrollTop = event.data.data.scrollCoordinates.scrollY;
const newX = event.data.data.coordinates.x + iframeX;
let newY = event.data.data.coordinates.y + iframeY + iframeScrollTop;
// Adjust newY if it's beyond the current view bounds
const maxYInView = window.innerHeight + window.scrollY;
console.log(maxYInView, window.innerHeight, window.scrollY, newY)
if (newY > maxYInView) {
newY = maxYInView;
}
event.data.data.coordinates = { x: newX, y: newY };
setToolInfoSquareData(event.data);
setOpenToolInfo(true);
}
};
window.addEventListener('message', handleMessage);
return () => {
window.removeEventListener('message', handleMessage);
};
}, [footprintsOn]);
我的计算中是否漏掉了一些东西?或者解决这个问题的正确方法是什么。
我想要类似以下示例的内容。在这种情况下,文本文档将是 iframe,即使它向下滚动,我也希望正方形出现在同一级别。 (使用我现在所拥有的,如果我单击文本并且已经向下滚动,正方形会出现在视图高度边界之外,并将常规滚动应用于父页面。我只希望 iframe 具有滚动):
您是否尝试过使用
document.scrollTop
而不是 window.scrollY
作为 iframe 的滚动值。
您没有显示如何在 iframe 中获取滚动位置的代码,因此很难进一步评论。