如何在max-width容器内实现符合特定要求的横向滑块？

调整后的HTML结构 #

先优化原结构，增加必要容器来控制对齐和层级：

<section id="home">
  <!-- 第一部分的居中容器，和work部分保持一致max-width -->
  <div class="container">第一部分内容</div>
</section>
<section id="work">
  <div class="work-container">
    <h1 class="work-title">Work</h1>
    <div class="slider-wrapper">
      <div class="slider-content">
        <!-- 滑块内的项目 -->
        <div class="slide-item">项目1</div>
        <div class="slide-item">项目2</div>
        <div class="slide-item">项目3</div>
        <div class="slide-item">项目4</div>
        <div class="slide-item">项目5</div>
        <div class="slide-item">项目6</div>
      </div>
    </div>
  </div>
</section>

CSS实现代码 #

/* 全局变量，统一第一部分和work部分的最大宽度 */
:root {
  --max-width: 1200px;
  --title-width: 80px; /* 旋转后标题的宽度，可根据实际调整 */
}

/* 第一部分的居中容器 */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Work部分的主容器，和第一部分对齐 */
.work-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  min-height: 300px; /* 根据滑块高度调整 */
}

/* 桌面端标题样式 */
.work-title {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: rotate(-90deg);
  transform-origin: left bottom;
  margin: 0;
  z-index: 2; /* 确保标题在滑块上方，滑块从下方穿过 */
  width: var(--title-width);
  text-align: right;
}

/* 滑块外层容器 */
.slider-wrapper {
  margin-left: var(--title-width); /* 避开标题区域 */
  overflow-x: auto;
  padding-right: calc((100vw - var(--max-width)) / 2); /* 填补屏幕边缘到容器右侧的空隙，实现滚动末端对齐容器边缘 */
  padding-bottom: 1rem; /* 滚动条下方留白 */
}

/* 滑块内容容器 */
.slider-content {
  display: flex;
  gap: 2rem;
  width: fit-content; /* 让内容撑开宽度 */
  padding: 2rem 0;
}

/* 滑块项目样式，可自定义 */
.slide-item {
  width: 300px;
  height: 200px;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 隐藏滚动条（可选） */
.slider-wrapper::-webkit-scrollbar {
  height: 6px;
}
.slider-wrapper::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

/* 移动端响应式设置 */
@media (max-width: 768px) {
  .work-title {
    position: static;
    transform: none;
    width: auto;
    text-align: left;
    margin-bottom: 1.5rem;
  }

  .slider-wrapper {
    margin-left: 0;
    padding-right: 0;
  }

  .slide-item {
    width: calc(100vw - 40px); /* 适配移动端宽度 */
  }
}

各需求实现说明 #

• 滑块与第一部分容器对齐：通过work-container和第一部分的container使用相同的max-width和居中设置实现。
• 滑块向右溢出至屏幕边缘：slider-wrapper设置padding-right填补容器到屏幕右侧的空隙，同时内容容器slider-content用width: fit-content撑开，配合overflow-x: auto实现横向滚动并溢出到屏幕边缘。
• 滑块从标题下方穿过：标题设置z-index: 2，滑块容器默认层级低于标题，滚动时内容自然从标题下方经过。
• 滚动至末端停在容器右侧边缘：slider-wrapper的padding-right值为屏幕宽度减去容器宽度的一半，刚好填补右侧空隙，滚动到最右端时，滑块内容的最后一项会对齐容器的右侧边缘。
• 移动端响应式：通过媒体查询，将标题改为静态定位取消旋转，置于滑块上方，同时调整滑块容器的边距和项目宽度适配移动端。

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