Huge Array Performance - Re-calculate The Speed For Each Movement?

I have got a div-container the size of the window itself. So its relativly big.This in turn has a child-div-container which is substantially larger.This 2nd div-container is absolutely positioned in the first and shall now be scrolled using the mouse. Because for this Project i don't want scrollbars.If the mouse moves to the edge of the outer div, the inner div should move in the appropriate direction.For that the first container has a MouseMove-listener and depending on how close the mouse is at the edge, a scrolling-speed-variable is set.Sidenote: the speed has not a linear but a quadratic increase. The moving itself is not the problem, but the calculation.Because of the quadratic increase in speed the calculation is rather expensive.The question is now whether it would be more performant if i create two arrays (for x- and y-axis) in which I store the velocities for each pixel, or whether I re-calculate the speed for each movement.

That would mean, at a window size of 1200x700px I had two arrays. One with 1200 fields ald values and another with 700. And thats a relativly small resolution.In this way the calculation must be performed only once. After that I only need to read the velocities out of the arrays.