如何解决网页中同时处理水平与垂直平滑滚动的冲突问题

问题原因 #

当设置html {scroll-behavior: smooth;}后，浏览器会对所有滚动操作（包括页面滚动和元素滚动）应用平滑动画。此时如果在页面平滑滚动过程中调用nav_bar.scrollBy()，浏览器会中断正在进行的页面滚动动画，优先处理导航栏的滚动，导致页面滚动未完成即终止。

解决方案 #

方案1：手动控制页面平滑滚动，分离时序 #

放弃依赖CSS的scroll-behavior，改用JavaScript实现页面平滑滚动，精准控制导航栏滚动的执行时机——等页面滚动完成后再处理导航栏的滚动逻辑。

// 获取所有导航链接与导航栏容器
const navLinks = document.querySelectorAll('nav a');
const navBar = document.querySelector('nav');

// 拦截导航链接点击事件，手动处理滚动
navLinks.forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const targetId = link.getAttribute('href').slice(1);
    const targetElement = document.getElementById(targetId);
    
    // 平滑滚动到目标内容区域
    targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    
    // 检测页面滚动是否完成
    let lastScrollPos = window.pageYOffset;
    const checkScrollCompletion = () => {
      const currentScrollPos = window.pageYOffset;
      if (currentScrollPos === lastScrollPos) {
        // 滚动完成，执行导航栏高亮与滚动逻辑
        highlightActiveLink(link);
        scrollNavToVisible(link);
      } else {
        lastScrollPos = currentScrollPos;
        requestAnimationFrame(checkScrollCompletion);
      }
    };
    requestAnimationFrame(checkScrollCompletion);
  });
});

// 高亮当前激活的导航链接
function highlightActiveLink(activeLink) {
  navLinks.forEach(link => link.classList.remove('active'));
  activeLink.classList.add('active');
}

// 将激活的导航链接滚动到导航栏可视区域
function scrollNavToVisible(activeLink) {
  const linkRect = activeLink.getBoundingClientRect();
  const navRect = navBar.getBoundingClientRect();
  
  // 计算滚动距离，让链接居中显示（可根据需求调整偏移值）
  const scrollOffset = linkRect.left - navRect.left - (navRect.width / 2) + (linkRect.width / 2);
  navBar.scrollBy({ left: scrollOffset - 125, behavior: 'smooth' });
}

方案2：保留CSS平滑滚动，检测滚动完成时机 #

如果坚持使用html {scroll-behavior: smooth;}，可以通过监听滚动状态判断页面平滑滚动是否结束，再执行导航栏滚动逻辑，同时添加防抖避免频繁触发。

const navLinks = document.querySelectorAll('nav a');
const navBar = document.querySelector('nav');
let scrollEndTimer;

// 处理导航链接点击事件
navLinks.forEach(link => {
  link.addEventListener('click', (e) => {
    const targetId = link.getAttribute('href').slice(1);
    const targetElement = document.getElementById(targetId);
    if (!targetElement) return;
    
    // 触发默认平滑滚动（依赖CSS的scroll-behavior）
    targetElement.scrollIntoView({ block: 'start' });
    
    // 延迟检测滚动完成，避免立即中断动画
    clearTimeout(scrollEndTimer);
    scrollEndTimer = setTimeout(() => {
      monitorScrollEnd(link);
    }, 100);
  });
});

// 监听页面滚动，自动更新导航激活状态
window.addEventListener('scroll', () => {
  clearTimeout(scrollEndTimer);
  scrollEndTimer = setTimeout(() => {
    updateActiveNavLink();
  }, 150);
});

// 检测页面滚动是否完成
function monitorScrollEnd(activeLink) {
  let lastScrollPos = window.pageYOffset;
  const check = () => {
    const currentScrollPos = window.pageYOffset;
    if (currentScrollPos === lastScrollPos) {
      highlightActiveLink(activeLink);
      scrollNavToVisible(activeLink);
    } else {
      lastScrollPos = currentScrollPos;
      requestAnimationFrame(check);
    }
  };
  requestAnimationFrame(check);
}

// 根据当前视口内容更新激活的导航链接
function updateActiveNavLink() {
  const sections = document.querySelectorAll('section[id]');
  let currentSectionId = '';
  
  sections.forEach(section => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.offsetHeight;
    // 调整偏移值控制高亮触发时机
    if (window.pageYOffset >= sectionTop - 100 && window.pageYOffset < sectionTop + sectionHeight - 100) {
      currentSectionId = section.getAttribute('id');
    }
  });
  
  if (currentSectionId) {
    const activeLink = document.querySelector(`nav a[href="#${currentSectionId}"]`);
    if (activeLink) {
      highlightActiveLink(activeLink);
      scrollNavToVisible(activeLink);
    }
  }
}

// 复用高亮与导航滚动函数
function highlightActiveLink(activeLink) {
  navLinks.forEach(link => link.classList.remove('active'));
  activeLink.classList.add('active');
}

function scrollNavToVisible(activeLink) {
  const linkRect = activeLink.getBoundingClientRect();
  const navRect = navBar.getBoundingClientRect();
  
  const scrollOffset = linkRect.left - navRect.left - (navRect.width / 2) + (linkRect.width / 2);
  navBar.scrollBy({ left: scrollOffset - 125, behavior: 'smooth' });
}

额外优化建议 #

• 给导航栏添加scroll-behavior: smooth;，让导航栏自身的滚动也更流畅
• 可使用Intersection Observer替代方案2中的updateActiveNavLink函数，更精准地检测视口中的内容标题，提升性能和准确性

内容的提问来源于stack exchange，提问作者Life of Madness