Как посчитать относительное положение элемента на экране с отрицательной точкой отсчета (getBoundingClientRect().left)?

Question

[Никита]

Есть блок, который движется по горизонтальной оси при скролле. Этот блок имеет ширину 300px. Ширина вьюпорта 1920px.
Соответственно, я могу узнать абсолютное положение блока при помощи getBoundingClientRect().left (учитываю именно левую грань блока).
Далее таким образом несложно посчитать относительное положение блока на экране:

let posX = elem.getBoundingClientRect().left; 
let screenWidth = document.documentElement.clientWidth;
let elapsed = posX / screenWidth * 100; //узнаем относительное положение элемента на экране

Но что если за начало я хочу взять -300px от начала вьюпорта? То есть я хочу чтобы отсчет «нулевой» точки был равен ширине блока. Как в таком случае отсчитывать прогресс блока от 0 до 100%?

Answer 1

[Никита]

Все оказалось проще, нужно просто прирастить эти 300px к ширине экрана и к текущей позиции

let elapsed = posX + 300 / (screenWidth + 300) * 100;

Answer 2

[Лев Александров]

Просто от высчитанного положения вычитаем ширину блока (относительно ширины экрана):

let elapsed = (posX / screenWidth * 100) - (300 / screenWidth * 100)

Можно упростить выражение:
let elapsed = (posX - 300) / screenWidth * 100

Либо в стилях элементу прописать и оставить прежнюю формулу:

.el {
    transform: translateX(-100%)
}

Comments

[Никита]

Смотрите, общая дистанция, по которой отсчитывается положение элемента от 0 до 100%, равна 300px+1920px=2220px (как указал схематически). А координаты elem.getBoundingClientRect().left выдает положение относительно вьюпорта, если элемент выйдет за пределы экрана (слева) то будет отрицательное значение, если будет заходить то положительное.