视口尺寸与“屏幕的可见部分”不匹配

问题描述

我试图创建一个在反应中的工具提示组件，以便当它靠近屏幕侧面时，它将与孩子对齐。我面临的问题是，当我尝试使用“ getBoundingClientRect”获取窗口大小（window.innerWidth和window.innerHeight）或组件的位置时，它们正在使用以下命令提供组件的宽度/高度和位置关于看起来像div而不是视口的外观（请参见附图）

“ getBoundingClientRect”给了我相对于中间部分大小的位置。将鼠标悬停在“将鼠标悬停在此处以查看工具提示”上时，应该显示我的工具提示。目前，它的顶部和左侧均为8px。在控制台中，我输出组件的innerHeight，innerWidth和getBoundingClientRect的结果。

这是我用于该职位的代码

useEffect(() => {
   const { innerWidth,innerHeight } = window;
   const {
     top,bottom,right,left,width
   } = reference.current.getBoundingClientRect();
   if (position !== 'left' && position !== 'right') {
     if (left <= 45 && dataLength > width) {
       setLeftOffset(calculateOffset(width,'left'));
     }

     if (top <= 45) {
       setPosition('bottom');
     }

     if (right >= innerWidth - 45 && dataLength > width) {
       setLeftOffset(-calculateOffset(width,'right'));
     }

     if (bottom >= innerHeight - 45) {
       setPosition('top');
     }
   }

   // If left or right,need an extra 5px offset
   if (position === 'left') setLeftOffset(5);

   if (position === 'right') setLeftOffset(-5);
 },[window]);

我只是不能正确理解视口吗？如何获得组件相对于屏幕的实际位置以及可见内容的实际大小？任何帮助将不胜感激！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）