Scale inside Scale Conversion

34 Views Asked by At

I tracked a mouse position inside a website, and this website has a height bigger than the visable area, so you can scroll. I captured the mouse y position based on the current view area (0 to 100), and also captured the amount of scroll that you did (0%, 10%, 20%, ..., 100%).

How can I know (not precisely) the correct position of your mouse position, given: CurrentMouseYOnView and CurrentAmountOfScroll?

It's not precisely, because if you scrolled 12%, I will calculate based on 10%.

Follow the image to explain a little better:

Image of Problem Visual Description

1

There are 1 best solutions below

0
On

Map the $0\%$ scroll to when the view window and full page have top edge aligned, and $100\%$ to when the bottom of the view window is aligned to the bottom of the full page.

Let the full length be $Y$ and the window height be $H$

Considering the top edge of the window as the reference, we are creating a linear scale of scrolling as

$(0, Y-H) \rightarrow(0, 100)$

Hence an $x\%$ scroll would correspond to the top edge being at

$$y_{top} =\frac{x(Y-H)}{100}$$

This is in the fixed reference of the full page

Now, within the page, you know the location of the mouse pointer as $y_{point}$

Hence, the position of the pointer would be

$$y_{true} = y_{top} + y_{point} = y_{point} + \frac{x(Y-H)}{100}$$