Javascript-форум - координаты в модальном окне

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - координаты в модальном окне (https://javascript.ru/forum/events/69795-koordinaty-v-modalnom-okne.html)

координаты в модальном окне

Добрый день!
Есть модальное окно имеющее следующую структуру:

Код:

              

                #overlay

                {

                        position: fixed;

                        background-color: rgba(0,0,0, 0.7);

                        left: 0;

                        top: 0;

                        height: 100%;

                        width: 100%;

                        overflow: auto;

                }

                #modal

                {

                        position: absolute;

                        left: 50%;

                        top: 50px;

                        transform: translateX(-50%);

                }

 <div id="overlay">

<div id="modal">

</div>

</div>

В #modal создается еще div в котором создается canvas. Размеры канвы и созданного дива задаются программно и размер зависит от картинки. Размер по вертикале становится больше чем окно браузера и появляются полосы прокрутки (на элементе #overlay).
Задача состоит в том, чтобы вычислить позиции курсора на канве. Т.е. нужно знать координаты на канве в области которая не поместилась на экране, смещена и открывается после прокрутки. pageYOffset не подходит, т.к. показывает смещение не в модальном окне, а по факту на Body.

Цитата:

Сообщение от Prowler

pageYOffset не подходит, т.к. показывает смещение не в модальном окне, а по факту на Body

https://developer.mozilla.org/ru/doc...dingClientRect
и
http://javascript.ru/ui/offset

laimas,
видимо, я плохо описал ситуацию. Итак, в созданный канвас выводится изображение, высота которого больше тела документа. Т.к. скрол добаляется на overlay то pageYOffset не меняется при скроллировании div с канвас. На канве внизу справа выводится другое изображение, при наведении на некоторые точки его нужно что-то делать. Т.е. я рисую изображение в области, координаты которой зависят от размера первого рисунка. Когда это изображение нарисовано за пределами документа - координаты не совпадают. Например, если картинка исходная большая по высоте и высота документа меньше (900px), то максимальная высота pageY будет 900. Но при этом картинка в углу выведена в координатах 1200. Чтобы добраться до этих координат, нужно скроллировать overlay. И так мы и получим, что мышка ходит в координатах 900, а картинка больше возможной области. Т.е. вот эти 300, что должны быть offset не знаю как можно получить. Есть мысль выводить вместе со вторым изобрмажанием на канве за ней еще div в тех же координатах и по нему высчитывать реальные координаты. Но какой-то костыль выходит.

laimas,
нашел свою ошибку - getBoundingClientRect при скроле и уходе элемента за экран показывает его координаты относительно и они становятся отрицательными. Завтра буду подумать, сегодня голова уже не хочет работать.