JavaScript Range.getBoundingClientRect() — координати діапазону

Метод getBoundingClientRect() повертає координати діапазону на екрані — прямокутник, що його охоплює.

правити

Загальний опис

Це те, завдяки чому панель форматування виринає саме над виділеним текстом, а не в кутку екрана.

Координати рахуються від вікна, а не від документа. Тому для абсолютного позиціонування до них треба додати window.scrollY і window.scrollX.

правити

Нотатка

Виклик змушує браузер порахувати макет. У обробнику selectionchange, який б'є часто, це відчутно — обмежуй частоту.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
getBoundingClientRect	1+	1+	1+	7+	12+	9+

Підтримка: мобільні переглядачі

Переглядач
getBoundingClientRect	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

<p>Виділи цей текст</p>
<div id="panel" hidden style="position:absolute">Ж К П</div>

document.addEventListener('selectionchange', () => {
    const selection = window.getSelection();
    const panel = document.getElementById('panel');

    if (selection.isCollapsed) {
        panel.hidden = true;
        return;
    }

    const rect = selection.getRangeAt(0).getBoundingClientRect();

    // координати від ВІКНА — додаємо прокрутку
    panel.style.top = (rect.top + window.scrollY - 40) + 'px';
    panel.style.left = (rect.left + window.scrollX) + 'px';
    panel.hidden = false;
});