时间戳

首页 > 解决方案 > 视口尺寸与“屏幕的可见部分”不匹配

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

问题描述

我正在尝试创建一个工具提示组件来做出反应，这样当它靠近屏幕一侧时，它会与孩子对齐。我面临的问题是，当我尝试使用“getBoundingClientRect”获取窗口大小（window.innerWidth 和 window.innerHeight）或组件的位置时，它们会给我组件的宽度/高度和位置关于看起来像 div 而不是视口的东西（见附图）sizeOfContainer在控制台中打印 innerWidth 和 innerHeight实际视口高度/宽度

“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]);

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

标签： javascripthtmlreactjsreduxviewport

解决方案

推荐阅读