How to map a dynamic value to a range with a min and max

Within my IntersectionObserver I am storing the Y position of each target element:

const targetPosition = entry.target.getBoundingClientRect().y;

And when the target is in view, I am applying a translateX() synced with that changing Y position. It essentially works, but I am trying to take that dynamic Y position of the target and map it to a range defined by me so I can more easily control the translateX() (and in both left and right directions).

I thought it might be as simple as

const transformRange = Math.max(Math.min(targetPosition,90),0);

but I understand why that doesn't do what I want (see edit below).

I also have the following working...

function scale (number, inMin, inMax, outMin, outMax) {
  return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
}
const num = targetPosition;
const transformRange = scale(num, -100, 1000, 0, 90);

but I don't want to be required to set a range for the source value as well (inMin and inMax) as that is changing.

The intent is to take that dynamic Y position* of the target element (*user scrolls, Y position decreases as the element approaches top of viewport) and convert that changing value to a range that I define.

EDIT

To provide more clarity, Math.max(Math.min(targetPosition,90),0) does not work because it is only limiting the stored Y position of the target element. I am trying to convert the entire scroll range of that element to an output range I define. For example, as the user scrolls, that element could be at say 658px as it enters the phone's viewport and will continue to decrease until it is out of view at the top of the viewport per the IntersectionObserver which would be somewhere around -103px (but obv will be a different set of numbers for different screens).

That 658px to -103px I need to convert/map/chain to a range I define such as 0-90. So 658 to -103 would be 1:1 with 0 to 90. That 0-90 I will then apply as the translateX().

Via Active questions tagged javascript - Stack Overflow https://ift.tt/fjsQkOt