横向滚动带滚动吸附时如何实现任意视口下当前元素水平居中

原有实现的核心问题是使用固定百分比作为首尾留白、配置scroll-snap-align: start，百分比值会随视口宽度动态变化，无法匹配不同宽度下让300px固定宽度卡片居中所需的留白值。

以下是完全适配所有视口宽度的修正代码：

Wrapper 样式 #

.carouselItemsWrapper {
  display: grid;
  grid-gap: 16px;
  grid-template-rows: 450px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  /* 首尾留白动态计算为(容器宽度 - 卡片宽度)/2，适配所有尺寸 */
  grid-template-columns: calc((100% - 300px)/2) repeat(var(--slide-count), 300px) calc((100% - 300px)/2);
  /* 滚动内边距和首尾留白对齐，保证吸附位置准确 */
  scroll-padding-inline: calc((100% - 300px)/2);
  /* 可选：隐藏滚动条不影响功能 */
  scrollbar-width: none;
}
.carouselItemsWrapper::-webkit-scrollbar {
  display: none;
}
/* 删掉原来重复的:before/:after伪元素，已经通过grid列定义了首尾留白 */

Element wrapper 样式 #

.carouselElementWrapper {
  /* 吸附对齐改为center，直接触发居中吸附逻辑 */
  scroll-snap-align: center;
  border: 1px solid var(--marketplaceColor);
  border-radius: 16px;
  padding: 32px 16px;
  justify-self: center;
}

注意事项 #

如果.carouselItemsWrapper的父元素宽度不等于视口宽度，把代码里的100%替换为100vw即可适配。

内容的提问来源于stack exchange，提问作者Zając