Решил сделать прокрутку ленты с товарами как на crazybox.
Набросал пример - https://jsfiddle.net/cpjgL1ys.
const btn = document.querySelector('.button button');
btn.addEventListener('click', ()=>{
const x = document.getElementById('active').getBoundingClientRect().left;
document.querySelector('.goods').style.transform = `translateX(-${x}px)`;
});
Проблема в том, что я не знаю как "центировать" элемент.
Т.е. мне нужно чтобы лента остановилась на id active. Я получаю его координаты через getBoundingClientRect. Так как их расчет идет сразу слева, а стрелка указывающая на выигрыш посередине, получается что и элемент с нужным id тоже останавливается слева, а не по середине как нужно. Мне удалось найти костыль в виде подсчета середины 170 * 4,5 элемента, но это будет работать только для конкретного разрешения экрана, а потом все сломается.
Подскажите пожалуйста, как сделать перемещение ленты до id active, и чтобы этот элемент был по середине стрелки.
Заранее спасибо за помощь.
P.S. В codepen или jsfiddle getBoundingClientRect как я понял не работает.