使用scroll-snap与flex实现CSS滑块居中无法滑动到首张问题

在横向可滚动的flex容器上设置justify-content: center会强制所有flex子项整体向容器中心偏移，当子项总宽度大于容器宽度时，最左侧子项会被推到滚动容器的起始边界（scrollLeft = 0位置）之外。由于滚动容器的scrollLeft最小值固定为0，无法滚动到负值区域，因此最左侧的第一张幻灯片会被截断，完全无法滑动到达。

不要使用flex的justify-content属性实现滚动滑块的居中效果，通过给两侧窄幻灯片设置左右外边距实现居中占位，配合scroll-snap-align: center实现吸附居中，再通过少量JS完成初始定位到第二张幻灯片的需求。

完整修正代码 #

CSS #

body {
    -webkit-overflow-scrolling: touch;
    margin: 0;
}
  
.wrapper {
    scroll-snap-type: x mandatory;
    display: flex;
    overflow-x: scroll;
    height: 400px;
    width: 100vw;
}
::-webkit-scrollbar {
    display: none; 
}
.item {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    flex: 0 0 auto;
    height: 400px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    color: whitesmoke;
    font-size: 64px;
}
.item-a {
    background-color: green;
    width: 150px;
    margin: 0 calc((100vw - 150px) / 2);
}
.item-b {
    background-color: red;
    width: 100vw;
}
.item-c {
    background-color: blue;
    width: 150px;
    margin: 0 calc((100vw - 150px) / 2);
}

HTML #

<main>
  <div class="wrapper" id="sliderWrapper">
    <div id="item-a" class="item item-a">a</div>
    <div id="item-b" class="item item-b">b</div>
    <div id="item-c" class="item item-c">c</div>
  </div>
</main>

Javascript #

window.addEventListener('DOMContentLoaded', () => {
  const wrapper = document.getElementById('sliderWrapper');
  // 初始滚动到第二张幻灯片位置，默认满屏展示
  wrapper.scrollTo({
    left: window.innerWidth,
    behavior: 'instant'
  });
});

• 页面加载完成后默认满屏展示第二张红色幻灯片
• 向左滑动（手指右拖）可到达第一张绿色幻灯片，幻灯片自动居中显示
• 向右滑动（手指左拖）可到达第三张蓝色幻灯片，幻灯片自动居中显示
• 无滚动截断问题，所有幻灯片均可正常访问

内容的提问来源于stack exchange，提问作者Dan