VelocityJS页面滚动效果故障求助（启用数据劫持的页面锚点）

我看了你基于VelocityJS实现的锚点滚动劫持代码，这里帮你梳理几个常见问题的修复方案，让滚动效果更流畅稳定：

1. 修复动画冲突与滚动锁逻辑 #

你的代码里已经用animating变量做了动画锁，但大概率是没在Velocity动画完成后正确解锁，导致滚动触发无响应。需要在动画回调里重置状态：

function navigateTo(target) {
  if(animating || target < 1 || target > sectionsAvailable.length) return;
  
  animating = true;
  var animationProperties = animationType === 'translate' ? 
    { translateY: -(target-1)*100 + '%' } : 
    { opacity: 0, translateY: '50px' };
  
  // 执行当前页面退出动画
  sectionsAvailable.eq(actual-1).velocity(animationProperties, {
    duration: 800,
    easing: 'easeInOutQuad'
  });
  
  // 执行目标页面进入动画
  sectionsAvailable.eq(target-1).velocity({ opacity: 1, translateY: '0' }, {
    duration: 800,
    easing: 'easeInOutQuad',
    complete: function() {
      animating = false;
      actual = target;
      updateVerticalNavigation();
      // 更新URL锚点
      window.history.pushState(null, null, '#section'+target);
    }
  });
}

2. 优化滚动阈值的触发判断 #

鼠标滚轮/触摸事件的差值计算要更精准，避免误触发：

$(window).on('mousewheel DOMMouseScroll touchmove', function(event) {
  if(animating) return;
  
  var delta = 0;
  // 处理鼠标滚轮事件
  if(event.type === 'mousewheel' || event.type === 'DOMMouseScroll') {
    delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
  } 
  // 处理触摸滚动事件
  else if(event.type === 'touchmove') {
    delta = event.originalEvent.touches[0].clientY - lastTouchY;
    lastTouchY = event.originalEvent.touches[0].clientY;
  }
  
  if(Math.abs(delta) >= scrollThreshold) {
    delta > 0 ? navigateUp() : navigateDown();
  }
});

// 触摸开始时记录初始位置
var lastTouchY = 0;
$(window).on('touchstart', function(event) {
  lastTouchY = event.originalEvent.touches[0].clientY;
});

3. 同步垂直导航的激活状态 #

确保滚动切换页面后，导航项的状态正确更新，同时禁用边界的上下箭头：

function updateVerticalNavigation() {
  // 更新导航项激活状态
  verticalNav.find('a').removeClass('active');
  verticalNav.find('a[href="#section'+actual+'"]').addClass('active');
  
  // 禁用/启用上下箭头
  prevArrow.toggleClass('disabled', actual === 1);
  nextArrow.toggleClass('disabled', actual === sectionsAvailable.length);
}

// 点击导航项直接跳转
verticalNav.find('a:not(.cd-prev):not(.cd-next)').on('click', function(e) {
  e.preventDefault();
  var target = parseInt($(this).attr('href').replace('#section', ''));
  navigateTo(target);
});

// 上下箭头点击逻辑
prevArrow.on('click', function(e) {
  e.preventDefault();
  navigateUp();
});

nextArrow.on('click', function(e) {
  e.preventDefault();
  navigateDown();
});

function navigateUp() {
  navigateTo(actual - 1);
}

function navigateDown() {
  navigateTo(actual + 1);
}

4. 补全响应式媒体查询逻辑 #

当屏幕尺寸较小时，应该关闭滚动劫持，恢复原生滚动体验：

function checkMediaQuery() {
  var mq = window.matchMedia('(min-width: 768px)');
  if(mq.matches) {
    hijacking = $('body').data('hijacking');
    if(hijacking === 'on') {
      // 禁用原生滚动
      $('body').css('overflow', 'hidden');
      $(window).on('mousewheel DOMMouseScroll touchmove', scrollHandler);
    }
  } else {
    // 启用原生滚动，解绑劫持事件
    $('body').css('overflow', 'auto');
    $(window).off('mousewheel DOMMouseScroll touchmove', scrollHandler);
    animating = false;
  }
}

// 初始化和监听窗口 resize
$(document).ready(function() {
  checkMediaQuery();
  $(window).on('resize', checkMediaQuery);
});

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