父级水平滚动容器内子级垂直滚动元素的滚动切换实现问题

完全可以实现，核心思路是监听子元素的滚轮事件，判断其是否已滚动到垂直边界：如果没到边界，阻止事件冒泡，让子元素自身完成垂直滚动；如果已到边界，则允许事件冒泡，触发父元素的水平滚动逻辑。

完整代码示例 #

HTML结构

<div class="parent-container">
  <div class="child-container">
    <div class="child-content">
      <!-- 子元素的垂直内容，足够长以触发滚动 -->
      子元素内容<br>子元素内容<br>子元素内容<br>子元素内容<br>子元素内容<br>
      子元素内容<br>子元素内容<br>子元素内容<br>子元素内容<br>子元素内容<br>
      子元素内容<br>子元素内容<br>子元素内容<br>子元素内容<br>子元素内容<br>
      子元素内容<br>子元素内容<br>子元素内容<br>子元素内容<br>子元素内容<br>
      子元素内容<br>子元素内容<br>子元素内容<br>子元素内容<br>子元素内容<br>
    </div>
  </div>
  <!-- 父元素的水平内容，足够宽以触发滚动 -->
  <div class="parent-content">父元素水平内容1</div>
  <div class="parent-content">父元素水平内容2</div>
  <div class="parent-content">父元素水平内容3</div>
  <div class="parent-content">父元素水平内容4</div>
  <div class="parent-content">父元素水平内容5</div>
</div>

CSS样式

.parent-container {
  width: 500px;
  overflow-x: auto;
  white-space: nowrap;
  border: 2px solid #ccc;
  padding: 10px;
}

.child-container {
  display: inline-block;
  width: 300px;
  height: 300px;
  overflow-y: auto;
  border: 1px solid #666;
  margin-right: 20px;
}

.parent-content {
  display: inline-block;
  width: 400px;
  height: 300px;
  background: #f0f0f0;
  margin-right: 20px;
  text-align: center;
  line-height: 300px;
}

JavaScript逻辑

const parent = document.querySelector('.parent-container');
const child = document.querySelector('.child-container');

// 父元素的水平滚动逻辑：滚轮上下滚转为左右滚动
parent.addEventListener('wheel', (e) => {
  e.preventDefault();
  // 根据滚轮方向调整水平滚动距离
  parent.scrollLeft += e.deltaY;
});

// 子元素的滚轮事件处理：优先垂直滚动，到边界后交给父元素
child.addEventListener('wheel', (e) => {
  const isAtTop = child.scrollTop === 0;
  const isAtBottom = child.scrollTop + child.clientHeight >= child.scrollHeight;

  // 当子元素在顶部且滚轮向上滚动，或在底部且滚轮向下滚动时，允许事件冒泡给父元素
  if ((isAtTop && e.deltaY < 0) || (isAtBottom && e.deltaY > 0)) {
    return; // 不阻止冒泡，让父元素处理
  }

  // 否则阻止冒泡，子元素自己处理垂直滚动
  e.stopPropagation();
});

关键逻辑说明 #

1. 父元素滚动：通过wheel事件监听，将滚轮的垂直偏移量deltaY转换为水平滚动的scrollLeft值，实现上下滚轮触发水平滚动。
2. 子元素滚动判断：
   • isAtTop：判断子元素是否已滚动到顶部（scrollTop === 0）
   • isAtBottom：判断子元素是否已滚动到底部（scrollTop + 可视高度 >= 总内容高度）
3. 事件冒泡控制：只有当子元素滚动到边界且滚轮继续朝边界方向滚动时，才允许事件传递给父元素，触发水平滚动；其他情况阻止冒泡，保持子元素的垂直滚动。

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