Как получить координаты вложенного элемента относительно родителя?

Question

[romaro]

Пункты меню вложены в контейнер меньшего размера:

<div class="st-c-scrollMenu js-c-scrollMenu">
        <div class="_scrollContainer">
            <li class="__item js-item"><a href="">{{ MainMenuBlock.dict.catalogTitle }}</a></li>
            <li class="__item js-item"><a href="">{{ MainMenuBlock.dict.goodsTitle }}</a></li>
            <li class="__item js-item"><a href="">{{ MainMenuBlock.dict.buyoutsTitle }}</a></li>
            <li class="__item js-item"><a href="">{{ MainMenuBlock.dict.buyersTitle }}</a></li>
            <li class="__item js-item"><a href="">{{ MainMenuBlock.dict.coursesTitle }}</a></li>
            </li>
        </div>
    </div>

Существует ли способ узнать число пикселей между левой границей родительского контейнера и начальной границей пункта меню, который выходит за границы родителя и поэтому не виден на экране? offsetLeft и scrollLeft возвращают нули.

Answer 1

[DmitryLife]

https://learn.javascript.ru/coordinates#getCoords

Считаешь расстояние от левого края у обоих элементов. Из одного вычитаешь второй.

Comments

[romaro]

Дмитрий, сделал на основе getBoundingClientRect(): подгоняю правую границу скрытого элемента к правой границе контейнера.

Но есть одна проблема. Я не смог найти в документации, когда вычисляется getBoundingClientRect(). Дело в том, что при загрузке одной и той же страницы, метод иногда возвращает "усеченные" размеры. Означает ли это, что скрипт, который вычисляет размеры, следует вызывать после проверки на document.readyState = 'complete'?