通过jQuery编程设置滚动时，如何避免阻塞滚动动画？

看起来你遇到的问题是在scroll事件回调中直接调用scrollTop()导致滚动动画被阻塞，这是因为同步修改滚动位置会打断浏览器的原生滚动流程，甚至触发循环的scroll事件。下面是具体的分析和解决方案：

问题原因 #

当你在scroll事件处理函数里直接执行$(document).scrollTop()时，这个操作会立即触发新的scroll事件，导致浏览器的滚动逻辑和你的代码操作互相干扰，最终阻塞了滚动动画的流畅性。同时，频繁触发的scroll事件也会带来不必要的性能开销。

解决方案 #

我们可以通过延迟执行滚动位置调整和防抖scroll事件来解决这个问题，具体代码如下：

var collapsed = false;

// 防抖函数：限制scroll事件的触发频率，提升性能
function debounce(func, delay) {
  let timeoutId;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(context, args), delay);
  };
}

$(window).scroll(debounce(function() {
  const scroll = window.pageYOffset || document.documentElement.scrollTop;
  const headerHeightDiff = 207 - 50; // 原header高度与固定后高度的差值

  if (scroll > 207 && !collapsed) {
    collapsed = true; // 先标记状态，避免重复执行
    // 修改header和content的样式
    $("#header").css({
      position: "fixed",
      height: "50px",
      "line-height": "50px"
    });
    $("#content").css("margin-top", "207px");
    
    // 使用requestAnimationFrame延迟调整滚动位置，避免阻塞原生滚动
    requestAnimationFrame(() => {
      $(document).scrollTop(scroll - headerHeightDiff);
    });
  } else if (scroll <= (207 - headerHeightDiff) && collapsed) {
    collapsed = false;
    // 恢复header和content的样式
    $("#header").css({
      position: "static",
      height: "207px",
      "line-height": "207px"
    });
    $("#content").css("margin-top", "0");
    
    requestAnimationFrame(() => {
      $(document).scrollTop(scroll + headerHeightDiff);
    });
  }
}, 10));

关键优化点： #

1. 防抖函数：限制scroll事件的触发频率，避免短时间内多次执行DOM操作和滚动调整，提升页面性能。
2. 提前标记状态：在执行DOM修改前先切换collapsed状态，防止因为滚动位置调整触发的新scroll事件重复执行代码。
3. requestAnimationFrame：将滚动位置调整延迟到浏览器下一次重绘时执行，让浏览器先完成当前的滚动处理，避免同步操作导致的动画阻塞。

额外建议 #

如果你的场景允许，使用CSS的position: sticky配合transition来实现header的收缩效果会更流畅，而且不需要手动处理滚动位置调整，完全由浏览器原生支持，性能更好。

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