实现横向列表滚动至底部时倒数第二项居中、最后一项占剩余空间

要实现滚动到列表末尾时倒数第二项居中、最后一项占满剩余空间的效果，我们可以通过监听滚动事件结合动态CSS类来实现，具体步骤如下：

核心思路 #

• 监听容器的横向滚动事件，判断是否滚动到了列表最右端；
• 当滚动到末尾时，给容器添加自定义类，通过这个类调整最后两项的布局：让绿色项（倒数第二）居中显示，红色项（最后）占据右侧所有剩余空间；
• 当用户往回滚动时，移除自定义类，恢复原有滚动布局。

完整代码实现 #

HTML（保持原有结构不变） #

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item green"></div>
  <div class="item red"></div>
</div>

CSS（新增滚动末尾的样式规则） #

/* 基础布局 */
.container {
  display: flex;
  overflow-x: auto;
  gap: 21px;
  padding-left: 11px;
  transition: overflow-x 0.2s; /* 平滑切换滚动状态 */
}

.item {
  min-width: 212px;
  height: 254px;
  background: #D9D9D9;
  flex-shrink: 0; /* 防止项被压缩 */
}

/* 视觉样式 */
.item.green {
  background: #099F9F;
}

.item.red {
  background: #FF6262;
}

/* 滚动到末尾时的布局调整 */
.container.at-end {
  overflow-x: visible; /* 关闭滚动条，因为已到末尾 */
  justify-content: center; /* 让倒数第二项居中 */
}

.container.at-end .item.red {
  min-width: unset;
  flex-grow: 1; /* 占据剩余空间 */
  margin-left: 21px; /* 保持和绿色项的间距，替代gap的作用 */
}

JavaScript（监听滚动事件） #

const container = document.querySelector('.container');

container.addEventListener('scroll', () => {
  // 判断是否滚动到最右端（预留1px误差避免精度问题）
  const isScrolledToEnd = container.scrollLeft + container.clientWidth >= container.scrollWidth - 1;
  // 动态添加/移除类
  container.classList.toggle('at-end', isScrolledToEnd);
});

效果说明 #

• 正常滚动时：容器保持横向滚动布局，所有项按固定宽度排列；
• 滚动到末尾时：容器自动切换布局，绿色项居中显示，红色项从绿色项右侧开始，一直延伸到容器最右端，同时隐藏滚动条；
• 往回滚动时：立即恢复原有滚动布局，滚动条重新出现。

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