水平滚动 - 居中当前元素答案

【问题标题】：Horizontal scroll - center current element水平滚动 - 居中当前元素
【发布时间】：2021-11-25 03:00:24
【问题描述】：

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

【问题讨论】：

您可以减小网格模板列的大小和间距

标签： html css frontend web-frontend

【解决方案1】：

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

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

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

【讨论】：