Javascript:如何跟踪 div 的绝对位置(顶部/左侧)？

Question

我需要根据 html 元素(div)在屏幕上的位置获取其所有位置。我想要类似 addEventListener 的东西，每当屏幕发生变化时(在调整大小/缩放/滚动等时 - 每当元素的位置发生变化时)，它都会发送元素的位置。这可以用纯 JavaScript 实现吗？

Answer 1

这并不是一个完整的答案，而是我在评论中的意思的两个例子。也许这会对您尝试做的事情有所帮助。没有预先构建的方法可以执行您想要的操作，但这并不意味着您不能执行此操作。

第一个用于在用户更改浏览器的默认字体大小时调整屏幕布局。没有相应的事件，因此我在窗口上使用 focus 和 blur 事件，并跟踪屏幕外元素的大小，以测试默认值是否为字体大小改变了。它是在 blur 上捕获的，并在 focus 上进行测试的。调整大小在 sizeTable 函数中进行。

window.addEventListener( 'focus', () => fontSizeProxy( false ), false );
window.addEventListener( 'blur', () => fontSizeProxy( true ), false );
fontSizeProxy.base = document.getElementById('sz_gauge').offsetHeight;
fontSizeProxy.size = document.querySelector('div.tabs').clientWidth;

function fontSizeProxy( b )
 {
   if ( b )
     { fontSizeProxy.size = document.querySelector('div.tabs').clientWidth; }
   else // focus event
     { setTimeout( done, 1000 ); };

    function done()
     {
       // Get w after the delay so browser can reset completely.
       let w = document.querySelector('div.tabs').clientWidth;
       if ( w !== fontSizeProxy.size )
         {
            fontSizeProxy.size = w;
            fontSizeProxy.base = document.getElementById('sz_gauge').offsetHeight;
            sizeTable( nav.n );
         }; // end if
       w = null;    
    } // close done
 } // close fontSizeProxy

第二个示例是一个 resize 事件，之所以显示，是因为它会限制该事件，以便函数 sizeTable 不会像事件触发那样频繁地执行。您可能需要比此处使用的 500 毫秒更少的节流。

window.addEventListener( 'resize', resize, false );

function resize()
 { 
    if ( !resize.clear ) 
      {
        resize.clear = setTimeout( () => { resize.clear = null; sizeTable( nav.n ); }, 500 );    
      }; // end if
 } // close resize

我想，你想要的概念就在这里。您只需要制作自己的 sizeTable 函数版本，该函数可以查询并调整事件发生时要执行的内容，并且您可能需要监听大量事件才能执行相同的函数，如此处所示。