鼠标滚轮横向滚动至元素末尾后切换为纵向滚动实现方案

需求场景 #

页面存在一个横向博客滑块区块，需要实现：

• 当用户滚动到该区块时，鼠标滚轮/触控板操作转为横向滚动滑块
• 当滑块滚动到最左端或最右端时，恢复页面的纵向滚动

当前代码的问题是强制拦截了所有滚轮事件，导致滑块到达边界后无法继续纵向滚动页面。

解决方案代码 #

HTML #

<div id="post-wrapper">
  <p>Post 1</p>
  <p>Post 2</p>
  <p>Post 3</p>
  <p>Post 4</p>
  <p>Post 5</p>
  <p>Post 6</p>
</div>

CSS #

#post-wrapper {
  display: flex;
  overflow-x: scroll;
  max-width: 100rem;
  margin: 0 auto;
}

#post-wrapper p {
  font-family: sans-serif;
  border-radius: 8px;
  background: #c2d8db !important;
  color: white;
  padding: 10rem 15rem;
  margin: 2rem 1rem;
}

JavaScript #

const postScroll = document.getElementById("post-wrapper");
postScroll.addEventListener('wheel', (event) => {
  // 判断滑块是否处于滚动边界
  const isAtLeftEdge = postScroll.scrollLeft === 0;
  const isAtRightEdge = postScroll.scrollLeft + postScroll.clientWidth >= postScroll.scrollWidth;

  // 向左滚动：仅当未到最左端时，执行横向滚动并拦截默认行为
  if (event.deltaY < 0 && !isAtLeftEdge) {
    postScroll.scrollBy({ left: -70 });
    event.preventDefault();
  }
  // 向右滚动：仅当未到最右端时，执行横向滚动并拦截默认行为
  else if (event.deltaY > 0 && !isAtRightEdge) {
    postScroll.scrollBy({ left: 70 });
    event.preventDefault();
  }
  // 到达边界时，不拦截事件，页面恢复正常纵向滚动
});

关键逻辑说明 #

• 通过三个属性判断滑块边界状态：
  • scrollLeft === 0：滑块已滚动至最左端
  • scrollLeft + clientWidth >= scrollWidth：滑块已滚动至最右端
• 仅在滚轮操作不会让滑块超出边界时，才执行横向滚动并阻止默认的纵向滚动；到达边界时放行滚轮事件，页面恢复正常纵向滚动。

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