水平滚动 - 居中当前元素

Question

我正在为一些元素创建自己的水平滚动视图。我遇到的问题是，无论视口的大小是多少（元素的宽度恒定为 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 - 我的代码看起来如何

Answer 1

好的，我知道了。我需要做的是正确计算伪元素的宽度和滚动填充：

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

因为我知道元素的大小和我使用的行间距，我只需要从容器宽度中减去这些值;)

水平滚动 - 居中当前元素

Horizontal scroll - center current element

html

css

frontend

web-frontend