实现水平滚动后无法向上滚动至初始区块的问题排查与解决

问题根源 #

你的代码中，.info容器的wheel事件被强制阻止了默认行为（evt.preventDefault()），无论当前水平滚动的位置如何，都会拦截鼠标滚轮的原生垂直滚动逻辑。当你在.info区域向上滚动想回到上方的初始区块时，即使.info已经处于水平滚动的最左端（scrollLeft = 0），页面也无法触发垂直滚动，因为默认行为被完全禁用了。

修复方案 #

修改JavaScript逻辑，只在需要水平滚动的时候阻止默认行为，当.info已经无法继续水平滚动时，允许浏览器执行原生的垂直滚动：

const scrollContainer = document.querySelector(".info");

scrollContainer.addEventListener("wheel", (evt) => {
  // 判断是否需要触发水平滚动
  const canScrollHorizontally = (evt.deltaY > 0 && scrollContainer.scrollLeft < scrollContainer.scrollWidth - scrollContainer.clientWidth) || 
                               (evt.deltaY < 0 && scrollContainer.scrollLeft > 0);
  
  if (canScrollHorizontally) {
    evt.preventDefault();
    scrollContainer.scrollLeft += evt.deltaY;
  }
  // 否则不阻止默认行为，让页面正常垂直滚动
});

完整代码示例 #

HTML

<div class="container">
  <h1>Learn Where</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque saepe excepturi enim laboriosam velit quibusdam? Quisquam quo maxime doloribus, placeat repudiandae animi, similique praesentium amet, nostrum quam impedit tempora dignissimos.
  </p>
  <div class="animate"><i class="fa-solid fa-angle-down"></i></div>
</div>

<section class="info">
  <section class="content">
    <h1>Replace</h1>
  </section>
  <section class="content">
    <h1>This</h1>
  </section>
  <section class="content">
    <h1>Text</h1>
  </section>
  <section class="content">
    <h1>Later</h1>
  </section>
</section>

CSS

.container {
  color: white;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9)), url(../images/philly-map.jpeg);
  background-size: cover;
  background-position: center;
}

.container p {
  font-size: 1.5em;
  padding: 20px;
}

.container h1 {
  font-size: 3em;
}

.animate {
  color: white;
  font-size: 5em;
  animation: animate 2s ease-in infinite;
  opacity: 1;
  transform: translateY(3em);
}

@keyframes animate {
  0% {
    opacity: 1;
  }
  75% {
    opacity: 0;
    transform: translateY(4em);
  }
  99% {
    opacity: 0;
    transform: translateY(3em);
  }
  100% {
    opacity: 1;
  }
}

.info {
  overflow-x: hidden;
  display: flex;
}

h1 {
  margin: 0;
  padding: 0;
}

.content {
  min-width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4ch;
}

.content:nth-child(even) {
  background-color: teal;
  color: white;
}

JavaScript（修复后）

const scrollContainer = document.querySelector(".info");

scrollContainer.addEventListener("wheel", (evt) => {
  const canScrollHorizontally = (evt.deltaY > 0 && scrollContainer.scrollLeft < scrollContainer.scrollWidth - scrollContainer.clientWidth) || 
                               (evt.deltaY < 0 && scrollContainer.scrollLeft > 0);
  
  if (canScrollHorizontally) {
    evt.preventDefault();
    scrollContainer.scrollLeft += evt.deltaY;
  }
});

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