如何同时实现平滑滚动、吸附滚动与锚点导航？

问题描述 #

我正尝试在HTML组件中同时实现平滑滚动、吸附滚动与锚点导航，要求同一时间仅显示一个tab，用户点击tab名称切换当前tab。但目前无法同时实现两种滚动效果：开启吸附滚动则平滑动画失效，反之亦然。另外还希望实现拖拽tab内容切换tab（该部分另行提问）。

原始代码如下：

<script src="https://cdn.tailwindcss.com/3.4.5"></script>
<html lang="en-GB">

<body>
  <main>
    <div class="flex flex-row gap-2 bg-red-500">
      <a aria-label="Lorem ipsum" href="#lorem-ipsum">Lorem ipsum</a>
      <a aria-label="Amet porttitor" href="#amet-porttitor">Amet porttitor</a>
      <a aria-label="Blandit turpis" href="#blandit-turpis">Blandit turpis</a>
    </div>

    <div class="flex flex-row snap-x snap-mandatory overflow-x-auto overflow-y-auto max-h-[100vh]">
      <div class="min-w-[100vw] min-h-[80vh] snap-start">
        <p id="lorem-ipsum">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suscipit adipiscing bibendum est ultricies integer quis.
        </p>
      </div>
      <div class="min-w-[100vw] min-h-[80vh] snap-start">
        <p id="amet-porttitor">
          Amet porttitor eget dolor morbi. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Cras tincidunt lobortis feugiat vivamus at. Eleifend donec pretium vulputate sapien
        </p>
      </div>
      <div class="min-w-[100vw] min-h-[80vh] snap-start">
        <p id="blandit-turpis">
          Blandit turpis cursus in hac habitasse platea. Egestas tellus rutrum tellus pellentesque eu. In eu s augue neque gravida. Tristique nulla aliquet enim tortor at auctor. A
        </p>
      </div>
    </div>
  </main>
  <style is:global>
    html {
      scroll-behavior: smooth;
    }
    
    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }
    }
  </style>
</body>

</html>

解决方案 #

问题根源在于原生scroll-behavior: smooth和CSS滚动吸附（snap）存在兼容性冲突，浏览器无法同时处理两种滚动行为。我们可以通过JavaScript手动控制平滑滚动，同时保留CSS吸附的效果。

1. 保留CSS吸附配置 #

保持滚动容器的snap相关类，确保手动滚动时的吸附效果正常：

<div class="flex flex-row snap-x snap-mandatory overflow-x-auto overflow-y-auto max-h-[100vh]" id="tab-container">
  <!-- tab内容 -->
</div>

2. 禁用全局平滑滚动 #

移除html { scroll-behavior: smooth; }规则，避免和JS控制的滚动逻辑冲突。

3. 添加锚点点击事件监听 #

通过JavaScript拦截锚点点击事件，手动计算目标位置并执行平滑滚动：

document.addEventListener('DOMContentLoaded', () => {
  const tabLinks = document.querySelectorAll('a[href^="#"]');
  const tabContainer = document.getElementById('tab-container');

  tabLinks.forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault(); // 阻止默认锚点跳转
      const targetId = link.getAttribute('href').slice(1);
      const targetTab = document.getElementById(targetId);
      
      if (!targetTab) return;

      // 计算目标tab相对于滚动容器的偏移量
      const scrollPosition = targetTab.parentElement.offsetLeft;

      // 执行平滑滚动
      tabContainer.scrollTo({
        left: scrollPosition,
        behavior: 'smooth'
      });
    });
  });
});

完整代码示例 #

<script src="https://cdn.tailwindcss.com/3.4.5"></script>
<html lang="en-GB">

<body>
  <main>
    <div class="flex flex-row gap-2 bg-red-500">
      <a aria-label="Lorem ipsum" href="#lorem-ipsum">Lorem ipsum</a>
      <a aria-label="Amet porttitor" href="#amet-porttitor">Amet porttitor</a>
      <a aria-label="Blandit turpis" href="#blandit-turpis">Blandit turpis</a>
    </div>

    <div class="flex flex-row snap-x snap-mandatory overflow-x-auto overflow-y-auto max-h-[100vh]" id="tab-container">
      <div class="min-w-[100vw] min-h-[80vh] snap-start">
        <p id="lorem-ipsum">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suscipit adipiscing bibendum est ultricies integer quis.
        </p>
      </div>
      <div class="min-w-[100vw] min-h-[80vh] snap-start">
        <p id="amet-porttitor">
          Amet porttitor eget dolor morbi. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Cras tincidunt lobortis feugiat vivamus at. Eleifend donec pretium vulputate sapien
        </p>
      </div>
      <div class="min-w-[100vw] min-h-[80vh] snap-start">
        <p id="blandit-turpis">
          Blandit turpis cursus in hac habitasse platea. Egestas tellus rutrum tellus pellentesque eu. In eu s augue neque gravida. Tristique nulla aliquet enim tortor at auctor. A
        </p>
      </div>
    </div>
  </main>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const tabLinks = document.querySelectorAll('a[href^="#"]');
      const tabContainer = document.getElementById('tab-container');

      tabLinks.forEach(link => {
        link.addEventListener('click', (e) => {
          e.preventDefault();
          const targetId = link.getAttribute('href').slice(1);
          const targetTab = document.getElementById(targetId);
          
          if (!targetTab) return;

          const scrollPosition = targetTab.parentElement.offsetLeft;

          tabContainer.scrollTo({
            left: scrollPosition,
            behavior: 'smooth'
          });
        });
      });
    });
  </script>
</body>

</html>

效果说明 #

• 点击锚点时，通过JS实现平滑滚动到目标tab位置
• 手动拖拽或滚动时，CSS吸附效果正常触发
• 自动兼容prefers-reduced-motion：如果用户开启减少动画，浏览器会自动跳过平滑效果，直接跳转目标位置

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