如何通过编程实现仅水平滚动而不触发垂直滚动？

问题根源分析 #

1. hashchange事件无法阻止锚点默认行为：该事件是哈希变化后触发的，此时浏览器已经完成了锚点跳转的垂直滚动，preventDefault()在这里完全无效。
2. 滚动目标错误：你调用了.slide元素的scrollTo，但实际可滚动的容器是.slider——.slide是flex布局下的子项，本身不需要滚动。
3. scrollTop参数混淆：你把窗口的垂直滚动位置传给了slide的scrollTop，这会导致不必要的垂直滚动；我们需要保持窗口的垂直位置不变，仅滚动slider的水平方向。

解决方案 #

1. 拦截锚点点击事件

直接监听滑块导航链接的点击事件，在点击时阻止默认行为，手动处理哈希更新和滚动逻辑。

2. 修正滚动目标与参数

• 滚动目标改为.slider容器
• 计算目标slide相对于slider的水平偏移量
• 手动保持窗口的垂直滚动位置不变
• 确保平滑滚动生效

修改后的完整代码 #

JavaScript

function handleSliderNavigation(event) {
  // 阻止锚点默认跳转行为
  event.preventDefault();
  const targetId = this.getAttribute('href').substring(1);
  const targetSlide = document.getElementById(targetId);
  if (!targetSlide) return;

  // 获取可滚动的slider容器
  const slider = targetSlide.closest('.slider');
  // 计算目标slide相对于slider的水平偏移
  const slideOffsetLeft = targetSlide.offsetLeft - slider.offsetLeft;
  
  // 记录当前窗口垂直位置，之后恢复
  const currentWindowTop = window.pageYOffset || (document.documentElement || document.body).scrollTop;

  // 更新URL哈希
  window.history.pushState(null, null, `#${targetId}`);
  
  // 水平滚动slider
  slider.scrollTo({
    left: slideOffsetLeft,
    top: 0, // slider本身不需要垂直滚动
    behavior: 'smooth'
  });

  // 强制恢复窗口垂直位置（防止浏览器偷偷滚动）
  window.scrollTo({
    top: currentWindowTop,
    left: window.pageXOffset,
    behavior: 'instant'
  });
}

document.addEventListener('DOMContentLoaded', function() {
  // 绑定所有滑块导航链接的点击事件
  const sliderNavLinks = document.querySelectorAll('.slider-nav');
  sliderNavLinks.forEach(link => {
    link.addEventListener('click', handleSliderNavigation);
  });

  // 页面加载时如果有哈希，自动滚动到对应slide
  if (location.hash) {
    const targetId = location.hash.substring(1);
    const targetSlide = document.getElementById(targetId);
    if (targetSlide) {
      const slider = targetSlide.closest('.slider');
      const slideOffsetLeft = targetSlide.offsetLeft - slider.offsetLeft;
      slider.scrollTo({
        left: slideOffsetLeft,
        top: 0,
        behavior: 'smooth'
      });
    }
  }
});

CSS（仅调整关键样式）

/**
* CSS of the slider
*/
.slider {
  max-width: 30em;
  display: flex;
  box-sizing: border-box;
  height: fit-content;
  align-items: center;
  position: relative;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* 添加平滑滚动的CSS fallback */
  scroll-behavior: smooth;
}

.slide {
  width: 100%;
  flex-grow: 1;
  flex-shrink: 0;
  flex-direction: column;
  scroll-snap-align: start;
  position: relative;
  /* 移除slide的overflow-x，不需要内部滚动 */
}

.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 修正垂直居中 */
  z-index: 8;
  margin: 0.25em;
  padding: 0.25em;
  background-color: white;
  min-height: 1em;
  text-decoration: none;
  color: #333;
}

.nav-next {
  right: 0;
}

.nav-prev {
  left: 0;
}

img {
  max-width: 100%;
  width: auto;
  height: auto;
  z-index: 2;
}

/** CSS of the rest */
body {
  margin: 0;
  padding: 0;
}

.long-content {
  background: linear-gradient(
    0deg,
    rgba(34, 193, 195, 1) 0%,
    rgba(253, 187, 45, 1) 100%
  );
  padding-top: 50em;
}

HTML（保持原有结构不变）

<div class="parallax-wrapper">
  <div class="long-content"></div>

  <div class="slider-wrapper">
    <div class="image-slider slider">
      <div class="slide" id="prev">
        <img src="https://images.unsplash.com/photo-1726711340699-952d47133b21?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw1fHx8ZW58MHx8fHx8" />
        <a href="#next" class="slider-nav nav-next">Next</a>
      </div>
      <div class="slide" id="next">
        <img src="https://images.unsplash.com/photo-1725714834984-4f37a2406563?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw0fHx8ZW58MHx8fHx8" />
        <a href="#prev" class="slider-nav nav-prev">Prev</a>
      </div>
    </div>
  </div>

  <div class="long-content"></div>
</div>

关键修改说明 #

• 拦截点击事件：直接在<a>标签的click事件中阻止默认行为，从根源避免浏览器执行锚点跳转的垂直滚动。
• 滚动目标修正：将滚动操作从.slide改为.slider容器，这才是实际的水平滚动载体。
• 保持窗口垂直位置：记录点击前的窗口垂直滚动位置，滚动后强制恢复，彻底消除垂直跳动。
• CSS滚动行为：给.slider添加scroll-behavior: smooth，作为JS平滑滚动的兼容性 fallback。

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