仿劳力士手表滚动区块功能失效，请求技术协助

问题根源分析 #

• 滚动容器指向错误：你把滚动操作绑定在了watch-items-wrapper上，但实际开启横向滚动的是父容器watch-reel-container，点击箭头自然不会触发滚动。
• JS执行时机不对：如果JS代码写在HTML结构之前，DOM还没完全加载，document.querySelector会获取不到元素，导致事件绑定失败，控制台无输出。
• 箭头样式冲突：你用了Font Awesome图标，又给箭头按钮加了伪元素content，会导致箭头重复显示，影响交互。
• 容器布局溢出设置问题：watch-reel-container的flex布局配合overflow: scroll需要调整，避免内部元素布局异常。

修复步骤 #

1. 修正滚动目标容器：把JS里的操作对象换成watch-reel-container，指向正确的滚动容器。
2. 调整JS执行时机：把JS代码放在HTML末尾，确保DOM加载完成后再执行。
3. 移除箭头伪元素内容：删除伪元素的content属性，保留Font Awesome图标即可。
4. 优化容器CSS：给watch-reel-container指定宽度，明确overflow-x: scroll; overflow-y: hidden，只开启横向滚动。

修改后的完整代码 #

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
<!-- Beginning of Watch Reel -->

<div class="watch-reel-h2">
  <h2>Featured Watches - <a href="#">View all</a></h2>
</div>
<div class="watch-reel-container">
  <div class="watch-items-wrapper">
    <div class="watch-reel-item">
      <img src="/images/rolex-panda.png" alt="Watch 1">
      <p class="watch-name">Rolex Panda</p>
    </div>
    <div class="watch-reel-item">
      <img src="/images/ap-1.png" alt="Watch 2">
      <p class="watch-name">AP Royal Oak Offshore</p>
    </div>
    <div class="watch-reel-item">
      <img src="/images/patek-1.png" alt="Watch 3">
      <p class="watch-name">Patek Phillipe</p>
    </div>
    <div class="watch-reel-item">
      <img src="/images/patek-1.png" alt="Watch 3">
      <p class="watch-name">Patek Phillipe</p>
    </div>
    <div class="watch-reel-item">
      <img src="/images/patek-1.png" alt="Watch 3">
      <p class="watch-name">Patek Phillipe</p>
    </div>
    <div class="watch-reel-item">
      <img src="/images/patek-1.png" alt="Watch 3">
      <p class="watch-name">Patek Phillipe</p>
    </div>
    <div class="watch-reel-item">
      <img src="/images/patek-1.png" alt="Watch 3">
      <p class="watch-name">Patek Phillipe</p>
    </div>
  </div>

  <div class="scroll-bar"></div>
  <div class="arrow-container">
    <button class="arrow-button left">
                <i class="fa fa-arrow-left"></i>
            </button>
    <button class="arrow-button right">
                <i class="fa fa-arrow-right"></i>
            </button>
  </div>
</div>
<!-- End of Watch Reel -->

<!-- JS放在HTML末尾确保DOM加载完成 -->
<script>
// 选择箭头按钮
const leftButton = document.querySelector('.arrow-button.left');
const rightButton = document.querySelector('.arrow-button.right');

// 选择正确的滚动容器
const watchReelContainer = document.querySelector('.watch-reel-container');

// 绑定点击事件实现滚动
leftButton.addEventListener('click', () => {
  watchReelContainer.scrollBy({
    left: -200,
    behavior: 'smooth'
  });
});
rightButton.addEventListener('click', () => {
  watchReelContainer.scrollBy({
    left: 200,
    behavior: 'smooth'
  });
});
</script>

CSS

/* Watch Reel Section */

.watch-reel-container {
  display: flex;
  position: relative;
  flex-wrap: nowrap;
  overflow-x: scroll; /* 仅开启横向滚动 */
  overflow-y: hidden; /* 隐藏垂直滚动条 */
  scroll-behavior: smooth;
  margin-left: 230px;
  width: calc(100% - 230px); /* 配合左边距确保容器宽度正确 */
}

.watch-items-wrapper {
  display: flex;
  flex-wrap: nowrap;
}

.watch-reel-item {
  flex: 0 0 200px;
  padding: 20px;
  cursor: pointer;
}

.watch-reel-container img {
  width: 400px;
  height: 400px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.watch-name {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #333;
  text-transform: uppercase;
}

.watch-reel-h2 {
  margin-top: 150px;
  margin-left: 250px;
}

.watch-reel-h2 a {
  text-decoration: none;
  color: #375ea1;
}

.watch-reel-h2 a:hover {
  opacity: 70%;
}

.scroll-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: #ccc;
  border-radius: 4px;
}

.arrow-container {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 修正垂直居中 */
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px; /* 避免箭头贴边 */
  box-sizing: border-box;
}

.arrow-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: black;
  color: white;
  font-size: 20px;
  cursor: pointer;
  border: none; /* 移除默认边框 */
  z-index: 10; /* 确保箭头在内容上方 */
}

/* 移除伪元素内容，保留Font Awesome图标 */
.arrow-button::before {
  left: 0;
}

.arrow-button.left::before {
  right: 0;
}

.arrow-button:hover {
  background: #333;
}

额外说明 #

• 修正了箭头容器的垂直居中逻辑，之前的transform: translateY(-100%)会导致箭头偏移，改成-50%才是正确的居中方式。
• 给箭头容器添加左右内边距，提升交互时的视觉体验。
• 简化了scrollBy的参数写法，直接使用正负偏移量即可，无需额外计算当前滚动位置。

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