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, которая запрашивает и корректирует то, что вы хотите выполнить, когда происходят события, и вам, возможно, придется прослушивать многочисленные события, чтобы выполнить ту же функцию, как здесь.