使用content-visibility后sticky吸顶header误触发上滚判定如何解决

问题根因 #

你的猜测完全正确：content-visibility: auto 会让浏览器在元素离开视口时卸载其渲染缓存，元素重新进入视口前才会重新计算布局，这个过程会导致页面总高度突变，进而引发scrollTop值的被动跳变，你原有直接对比前后scrollTop判断滚动方向的逻辑就会出现误判。你使用的500ms节流间隔进一步放大了这个问题，两次采样间隔内布局变化带来的scrollTop差值会被直接当成滚动方向变化。

解决方案 #

方案1：优先使用CSS原生sticky实现（最优解） #

完全不需要JS监听滚动事件，浏览器原生实现的吸顶逻辑不受content-visibility布局变化影响，性能和稳定性远高于自定义JS方案：

.header {
  height: 200px;
  background-color: white;
  /* 新增以下属性即可 */
  position: sticky;
  top: 0;
  z-index: 10;
}
/* 可以直接删掉.header-fixed相关样式和对应的JS逻辑 */

目前所有主流浏览器都已支持position: sticky，除非你需要兼容IE11及更早版本，否则优先选这个方案。

方案2：修复现有JS逻辑的兼容问题 #

如果必须保留原有fixed实现，按以下步骤修改即可解决误触发问题：

1. 给所有content-visibility: auto元素添加contain-intrinsic-size属性，提前告知浏览器元素预估高度，避免页面高度突变：

.content-visibility {
  content-visibility: auto;
  /* 按元素实际总高度预估一个值，误差偏大也不影响效果 */
  contain-intrinsic-size: 3000px;
}

2. 优化滚动方向判断逻辑，增加差值阈值过滤布局变化带来的微小scrollTop波动，同时调小节流间隔提升响应灵敏度：

$(document).ready(function(){
  var lastScrollTop = window.pageYOffset || 0;
  var isFixed = false;
  // 节流间隔从500ms改成100ms，更贴合滚动采样频率
  $(window).on('scroll', _.throttle(function(){
      var scrollTop = $(window).scrollTop();
      var scrollDiff = scrollTop - lastScrollTop;
      // 差值超过10px才判定为真实滚动，过滤布局波动
      if(scrollTop > 200 && scrollDiff < -10 && !isFixed){
        console.log('stick header');
        $('.header').addClass('header-fixed');
        isFixed = true;
      } else if((scrollDiff > 10 && isFixed) || scrollTop == 0){
        console.log('unstick header');
        $('.header').removeClass('header-fixed');
        isFixed = false;
      }
    lastScrollTop = scrollTop;
  }, 100));
});

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