纯CSS滚动功能问题：点击箭头后无法重复触发操作

问题根源在于复选框（checkbox）是切换式控件，一旦处于选中状态，再次点击关联标签不会触发任何状态变化，导致滚动动作无法重复执行。我们可以改用单选按钮组结合动态显示/隐藏标签的方式，实现每次点击箭头都能触发滚动，完全无需JavaScript。

核心思路 #

1. 使用同名的单选按钮（radio button）表示不同的滚动状态（初始位置、第一次右移等），单选按钮组保证同一时间只有一个状态生效。
2. 为每个滚动状态配对对应的箭头标签，利用CSS的:checked伪类动态显示/隐藏合适的箭头，确保每次点击箭头都能切换到下一个滚动状态。
3. 根据当前选中的单选按钮，为滚动容器应用对应的位移变换。

修改后的完整代码 #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Horizontal Scroll with CSS Arrows and Smooth Transition</title>
</head>
<body>
  <div class="scroll-wrapper">
    <!-- 滚动状态单选按钮组，初始选中第一个 -->
    <input type="radio" name="scrollState" id="scroll-0" checked>
    <input type="radio" name="scrollState" id="scroll-1">
    
    <!-- 动态显示的箭头标签 -->
    <!-- 左箭头：只有在非初始状态时显示 -->
    <label for="scroll-0" class="arrow arrow-left scroll-left-0">←</label>
    
    <!-- 右箭头：根据当前状态显示对应标签 -->
    <label for="scroll-1" class="arrow arrow-right scroll-right-1">→</label>

    <!-- 滚动内容容器 -->
    <div class="scroll-container">
      <div class="scroll-item">
        <img src="https://picsum.photos/350" alt="Image 1">
      </div>
      <div class="scroll-item">
        <img src="https://picsum.photos/350" alt="Image 2">
      </div>
      <div class="scroll-item">
        <img src="https://picsum.photos/350" alt="Image 3">
      </div>
      <div class="scroll-item">
        <img src="https://picsum.photos/350" alt="Image 4">
      </div>
    </div>
  </div>
</body>
</html>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
}

.scroll-wrapper {
  position: relative;
  width: 1200px;
  overflow: hidden;
  margin: 0 auto;
}

.scroll-container {
  display: flex;
  width: 1400px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  transition: transform 0.5s ease;
}

.scroll-item {
  display: inline-block;
  width: 350px;
  height: 350px;
  margin-right: 10px;
  scroll-snap-align: start;
}

.scroll-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scroll-item:nth-child(4) {
  margin-right: 0;
}

.scroll-container::-webkit-scrollbar {
  display: none;
}

/* 隐藏所有单选按钮 */
input[type="radio"] {
  display: none;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  padding: 15px;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.arrow-left {
  left: 5px;
}

.arrow-right {
  right: 5px;
}

.scroll-wrapper:hover .arrow {
  opacity: 1;
}

/* 动态控制箭头显示/隐藏 */
/* 初始状态：只显示第一个右箭头，隐藏左箭头 */
.scroll-left-0, .scroll-right-1 {
  display: none;
}
#scroll-0:checked ~ .scroll-right-1 {
  display: block;
}

/* 第一次右移状态：显示左箭头，隐藏右箭头 */
#scroll-1:checked ~ .scroll-left-0 {
  display: block;
}
#scroll-1:checked ~ .scroll-right-1 {
  display: none;
}

/* 根据选中状态应用滚动位移 */
#scroll-0:checked ~ .scroll-container {
  transform: translateX(0);
}
#scroll-1:checked ~ .scroll-container {
  transform: translateX(-200px);
}

扩展说明 #

如果需要支持更多滚动步骤（比如每次右移200px，共3次），只需：

1. 添加更多单选按钮（scroll-2, scroll-3等）
2. 对应添加箭头标签（scroll-right-2指向scroll-2，scroll-left-1指向scroll-1等）
3. 在CSS中添加状态切换规则和位移变换规则

这种方案完全依赖CSS的:checked伪类和兄弟选择器，无需任何JavaScript即可实现可重复触发的滚动功能。

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