如何让固定宽度容器内的全宽溢出滚动滑块首尾对齐容器边缘

实现方案 #

你需要的对齐效果可以通过给首尾滑块元素设置动态计算的外边距实现，具体修改如下：

在现有CSS基础上新增以下样式即可：

.one-item:first-child {
  margin-left: max(0px, calc((100vw - 600px) / 2));
}
.one-item:last-child {
  margin-right: max(0px, calc((100vw - 600px) / 2));
}

逻辑说明

• 外层.container固定max-width: 600px且居中，屏幕宽度大于600px时，视口和容器两侧的间距为(100vw - 600px)/2，把这个值作为首尾元素的左右外边距，刚好满足初始状态首元素对齐容器左边缘、滚动到末尾时尾元素对齐容器右边缘的需求
• 当屏幕宽度小于等于600px时，max(0px, 计算值)会自动取0作为边距，此时滑块首尾元素贴合视口边缘，符合小屏设备的滚动交互习惯

修改后滑块始终保持全屏宽度，滚动时元素可以正常滑到屏幕边缘，所有尺寸下对齐效果都符合要求。以下是完整可直接使用的CSS代码：

.container {
  max-width:600px;
  margin:0 auto;
  position:relative;
  background-color:#dedede;
}

.full-width-slider {
    overflow-x: auto;
    display:flex;
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}
.one-item {
  min-width:300px;
  margin:20px 20px 20px 0;
  background-color:#000;
  color:#fff;
}
.one-item:first-child {
  margin-left: max(0px, calc((100vw - 600px) / 2));
}
.one-item:last-child {
  margin-right: max(0px, calc((100vw - 600px) / 2));
}

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