如何用JavaScript实现横向滚动Flex行的分区点击滚动与光标切换？

我正在构建一个完全采用flexbox列和行布局的小型网站，其中某一行支持横向滚动。我希望该行不仅可通过滚动操作切换内容，还能通过点击其可见区域的左半部分或右半部分来触发滚动；同时，鼠标悬停在左半区域时光标变为cursor: w-resize，悬停在右半区域时变为cursor: e-resize。

现有HTML代码 #

<div class="project">
  <div class="project-images">
   <div id="project-image"><img id="image-standart-height" style="max-height: 400px" src="/Users/andrei/Desktop/All Work/portfolio and cv/my website/images/bahorvesna.png" alt=""></div>
   <div id="project-image"><img id="image-standart-height" style="max-height: 400px" src="/Users/andrei/Desktop/All Work/portfolio and cv/my website/images/bahorvesna.png" alt=""></div>
   <div id="project-image"><img id="image-standart-height" style="max-height: 400px" src="/Users/andrei/Desktop/All Work/portfolio and cv/my website/images/bahorvesna.png" alt=""></div>
   <div id="project-image"><img id="image-standart-height" style="max-height: 400px" src="/Users/andrei/Desktop/All Work/portfolio and cv/my website/images/bahorvesna.png" alt=""></div>
  </div>
  <div class="project-text">
Bahor/Vesna
  </div>
</div>

现有CSS代码 #

#project-image {
  flex: 0 0 auto;
  max-height: 400px;
}

#image-standart-height {
  max-height: 400px;
}

.project-text {
  display: flex;
  gap: 20px;
  align-items: baseline;
}

我原本考虑在不同z轴层级创建一个隐形层，但担心会破坏flexbox布局。请问是否可以通过JavaScript编写函数，检测鼠标进入div可见区域的特定部分时，改变光标样式并让该区域具备可点击性？

完全可以用JavaScript实现需求，不需要额外添加隐形层破坏布局，步骤如下：

1. 修正HTML的ID问题 #

ID是唯一标识，不能重复，把重复的#project-image和#image-standart-height改成类：

<div class="project">
  <div class="project-images">
   <div class="project-image"><img class="image-standart-height" style="max-height: 400px" src="/Users/andrei/Desktop/All Work/portfolio and cv/my website/images/bahorvesna.png" alt=""></div>
   <div class="project-image"><img class="image-standart-height" style="max-height: 400px" src="/Users/andrei/Desktop/All Work/portfolio and cv/my website/images/bahorvesna.png" alt=""></div>
   <div class="project-image"><img class="image-standart-height" style="max-height: 400px" src="/Users/andrei/Desktop/All Work/portfolio and cv/my website/images/bahorvesna.png" alt=""></div>
   <div class="project-image"><img class="image-standart-height" style="max-height: 400px" src="/Users/andrei/Desktop/All Work/portfolio and cv/my website/images/bahorvesna.png" alt=""></div>
  </div>
  <div class="project-text">
Bahor/Vesna
  </div>
</div>

2. 调整CSS实现横向滚动 #

给.project-images添加横向滚动和flex布局：

.project-images {
  display: flex;
  overflow-x: auto;
  gap: 10px; /* 可选：图片间添加间距 */
  cursor: default; /* 默认光标 */
}

.project-image {
  flex: 0 0 auto;
  max-height: 400px;
}

.image-standart-height {
  max-height: 400px;
  object-fit: contain; /* 可选：保持图片比例 */
}

.project-text {
  display: flex;
  gap: 20px;
  align-items: baseline;
}

3. JavaScript实现光标切换和点击滚动 #

通过监听鼠标移动事件判断位置，修改光标；监听点击事件触发滚动：

const scrollContainer = document.querySelector('.project-images');

// 鼠标移动时切换光标
scrollContainer.addEventListener('mousemove', (e) => {
  const containerRect = scrollContainer.getBoundingClientRect();
  const halfWidth = containerRect.width / 2;
  // 计算鼠标在容器内的水平位置
  const mouseXInContainer = e.clientX - containerRect.left;
  
  if (mouseXInContainer < halfWidth) {
    scrollContainer.style.cursor = 'w-resize';
  } else {
    scrollContainer.style.cursor = 'e-resize';
  }
});

// 鼠标离开容器时恢复默认光标
scrollContainer.addEventListener('mouseleave', () => {
  scrollContainer.style.cursor = 'default';
});

// 点击时触发滚动
scrollContainer.addEventListener('click', (e) => {
  const containerRect = scrollContainer.getBoundingClientRect();
  const halfWidth = containerRect.width / 2;
  const mouseXInContainer = e.clientX - containerRect.left;
  // 每次滚动一个容器宽度的80%，可根据需求调整
  const scrollDistance = containerRect.width * 0.8;

  if (mouseXInContainer < halfWidth) {
    // 左半部分：向左滚动
    scrollContainer.scrollBy({
      left: -scrollDistance,
      behavior: 'smooth' // 平滑滚动，可选
    });
  } else {
    // 右半部分：向右滚动
    scrollContainer.scrollBy({
      left: scrollDistance,
      behavior: 'smooth'
    });
  }
});

说明 #

• 不需要额外添加层级元素，完全基于原有的.project-images容器实现，不会破坏flex布局
• 滚动距离可以根据需求调整scrollDistance的值，比如改成单张图片的宽度
• 平滑滚动behavior: 'smooth'是可选的，不需要可以去掉

内容的提问来源于Stack Exchange，提问作者Andrei