Как посчитать позицию элемента, который находится внутри scroll элемента?

Question

[GaserV]

Такая ситуация. Если таблица не имеет скрола - все ок. Но когда контент не умещается - она у меня скролится. И из-за этого не могу посчитать точную его позицию. Он как бы считает верно, но если проскролить таблицу чтобы элемент был виден и кликнуть то позиция элемент, который появится при клике улетает далеко-далеко. Кто сталкивался? Как решили?

Comments

[FabiBoom]

А как вы сейчас считаете позицию?

[GaserV]

const { x, y, width } = wrapRef.current.getBoundingClientRect();
const left = x + width / 2;
const top = y

[FabiBoom]

GaserV, попробуйте

const left = x + width / 2 + table.scrollLeft;
const top = y + table.scrollTop;

где table - это ваша таблица

[GaserV]

ага, спасибо. А такой еще вопрос. А если про родителя ничего не знаем? То есть то над ним - грубо говоря не известно: это может быть любой элемент

[FabiBoom]

GaserV, с любого элемента можно получить родителя через elem.parentElement это не вариант?

[GaserV]

FabiBoom, думаю что нет. Потому что в данном случае - это таблица. И родитель этого элемента будет tr. Выше - tbody. Выше - table. И только потом сам элемент у которого есть скролл

[GaserV]

а в другом случае - родитель сразу может быть этот див. Ну или другой

[FabiBoom]

GaserV, есть два варианта - поднимаетесь так по предкам пока не достигнете нужного - elem.parentElement.parentElement.parentElement.parentElement. Да скучно.

Можно проще есть такой метод, который возвращает ближайшего предка по селектору closest

elem.closest('.класс-элемента-у-которого-скролл')

[GaserV]

хм. А по какому принципу тултип из react-bootstrap считает например позицию? Он ведь не знает ничего про родителей грубо говоря