Как центрировать по scrollWidth вместо containerWidth?

Для центрирования элемента по scrollWidth вместо containerWidth в CSS, можно использовать позиционирование и трансформацию.

Первым шагом, убедитесь, что ваш контейнер имеет overflow: scroll, чтобы создать горизонтальную прокрутку. Это главное условие для правильной работы центрирования по scrollWidth.

Далее, вам понадобится внешний контейнер, который будет содержать ваш элемент и занимать всю ширину по scrollWidth. Для этого задайте следующие свойства контейнеру:

.container {
  display: flex; /* Используем flex-контейнер */
  justify-content: center; /* Центрируем элементы по горизонтали */
  overflow-x: scroll; /* Включаем горизонтальную прокрутку */
  width: 100%; /* Занимаем всю доступную ширину */
}

После этого вы можете добавить свой элемент в этот контейнер и задать ему определенную ширину, которая превышает ширину видимой области контейнера. Например:

.element {
  width: 1200px; /* Устанавливаем ширину элемента */
}

Теперь когда вы прокручиваете, элемент будет уровновешенно центрирован по scrollWidth вместо containerWidth.

Вот полный пример кода:

<div class="container">
  <div class="element"></div>
</div>

.container {
  display: flex;
  justify-content: center;
  overflow-x: scroll;
  width: 100%;
}

.element {
  width: 1200px;
}

При таком подходе, ваш элемент будет правильно центрирован по scrollWidth вместо containerWidth и при прокрутке он всегда будет оставаться в центре видимой области.