Как динамически узнать отступ?

Question

[dc65k]

Всем привет. В примере ниже есть блоки, выстроенные по горизонтали.
https://codepen.io/dc65k/pen/PoGNWPO

Необходимо узнать насколько пикселей нужно сделать:
transform: translateX();
что дойти ровно до правого края блока.
Это значение можно узнать через:

window.addEventListener('scroll', function (e) {
    console.log(window.pageXOffset);
});

Соответственно вопрос как динамически узнать это значение и какой способ правильный?

Comments

[Alex Ozerov]

ничего не понял, обьясните какой блок до какого должен сместиться

[dc65k]

Alex Ozerov, в данном случае, нажав на кнопку необходимо, чтобы произошло смещение до правого края десятого блока (до правого края контейнера, в котором находятся пронумерованные блоки). Значение этого отступа можно узнать:

window.addEventListener('scroll', function (e) {
    console.log(window.pageXOffset);
});

если проскроллить по x до конца. Возможно этот отступ можно узнать и иначе, собственно в этом и вопрос, как динамически узнать этот отступ. В примере он добавлен в стилях:

.animation {
  transform: translateX(-3161px);
}

[Alex Ozerov]

dc65k, смещаться вправо кнопка должна?

[Павел Корнилов]

https://developer.mozilla.org/ru/docs/Web/API/Elem...

Answer 1

[Bersonazh]

window.scrollBy(document.body.scrollWidth, window.scrollY)

Comments

[dc65k]

Почти. Я возможно не совсем точно объяснил, что мне требуется, если доскроллить ползунком по "x" до конца, будет максимальное число:

window.addEventListener('scroll', function (e) {
    console.log(window.pageXOffset);
});

При загрузке страницы мне необходимо было узнать это число.

const sliderRef = document.querySelector(".slider");
const x = sliderRef.scrollWidth - sliderRef.getBoundingClientRect().width + sliderRef.getBoundingClientRect().x;

[Bersonazh]

dc65k, document.body.scrollWidth - получите максимальную прокрутку по Х. Если у вас эта прокрутка появляется динамично, то вам просто нужно выполнить document.body.scrollWidth после того, как обновиться прокрутка