scroll - SVG mouse event unsyncronized if window scrolled

Question

I don't know how to properly explain this.

I have a svg element which is a big rectangle. If i scroll down, then click on my element, the click isn't registered where my mouse is, but where my mouse would be if i didn't scroll down.

So, if i scroll down by 100px and click on my rectangle, the click will be registered 100px above where i actually clicked.

It's behaving as if i hadn't scrolled down.

Edit: I'm using event.clientX and event.clientY to get the mouse position.

I'm new to svg and i don't know the right keywords to describe my problem. I'm using svg.js, though i don't think it's relevant to the problem.

I assume this is a well known thing. Can someone point me in the right direction? What kind of keyword am i looking for here?

The problem seems simple enough, i just need to know what to search for.

Thank you.

Answer 1

The problem was the utilization of (event.clientX, event.clientY) to get the mouse position.

In the presence of a vertical and/or horizontal scroll, using these properties caused a mismatch between where the mouse appeared within the page and the mouse position provided by (event.clientX, event.clientY).

I was using the mousedown event, with the mousemove event to create a selection rectangle, similar to what you can find in video games. When horizontal or vertical scrolling had been applied, my selection rectangle didn't appear where my mouse was.

This was solved by using event.pageX and event.pageY (instead of clientX and clientY).

Thank you to @ccprog for pointing me in the right direction.