Блог

Я создаю свой собственный вид горизонтальной прокрутки для нескольких элементов. Проблема, с которой я сталкиваюсь, заключается в том, что мне нужно, чтобы текущий элемент располагался по горизонтали (с привязкой прокрутки) независимо от размера окна просмотра (элементы имеют постоянную ширину 300 пикселей), и я не могу этого достичь. Приведенный ниже код работает не для каждой ширины окна просмотра — я пытался настроить процентные значения, но это не решение. Мне нужно иметь постоянную ширину элемента И зазор между элементами (который у меня сейчас есть), но текущие элементы всегда должны быть в центре экрана.

Обертка:

 .carouselItemsWrapper {
  display: grid;
  grid-gap: 16px;
  grid-template-rows: 450px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  grid-template-columns: 10% repeat(var(--slide-count), 300px) 10%; //I tried with :before and :after pseudoelements but it didn't work
  scroll-padding-left: calc(10%   16px); //I thought that would help but no
}

.carouselItemsWrapper:before,
.carouselItemsWrapper:after {
  content: '';
  width: 100%;
}
 

Оболочка элемента:

 .carouselElementWrapper {
  scroll-snap-align: start;
  border: 1px solid var(--marketplaceColor);
  border-radius: 16px;
  padding: 32px 16px;
  justify-self: center;
}
 

Некоторые экраны ниже:
1 — как это должно выглядеть (и выглядит, но только на одной ширине)

2 — как это выглядит с моим кодом

Ладно, я все понял. Что мне нужно было сделать, так это просто правильно рассчитать ширину псевдоэлементов и прокрутить заполнение:

   grid-template-columns: calc((100% - 332px) / 2) repeat(var(--slide-count), 300px) calc(
      (100% - 332px) / 2
    );
  scroll-padding-left: calc((100% - 300px) / 2);
 

Так как я знаю размер элемента и пробел в строке, который я использовал, мне просто нужно вычесть эти значения из ширины контейнера 😉