iOS下Angular 4滚动固定头部：手指离开后函数不触发问题

我之前也碰到过iOS惯性滚动导致的这个棘手问题！核心原因是iOS的滚动机制——当你手指离开屏幕后，惯性滚动阶段浏览器会把滚动操作放到专门的线程里处理，这时候主线程上的scroll、touch事件都会暂停触发，直到滚动完全停止。下面几个思路应该能帮你解决：

1. 改用position: sticky（优先推荐） #

• 这是CSS原生的粘性定位，专门用来实现「滚动到特定位置固定」的效果，完全不需要JS，浏览器原生处理，完美适配iOS的惯性滚动。
• 用法很简单：给头部元素设置position: sticky; top: 0;，再确保它的父元素没有设置overflow: hidden/auto/scroll（这会破坏sticky的生效条件）。
• 注意：如果你的头部需要复杂的样式过渡，sticky也能配合CSS动画实现，比自己用JS+绝对定位靠谱多了。

2. 使用requestAnimationFrame配合滚动状态检测 #

• 如果因为某些业务限制不能用sticky，那可以用requestAnimationFrame来持续监听滚动位置，哪怕在惯性滚动期间也能触发。
• 思路：在touchstart或者初始的scroll事件里启动一个requestAnimationFrame循环，在循环里实时检测当前滚动位置，判断是否需要切换头部的定位状态，直到滚动停止后再取消循环。
• 示例代码参考：

  let rafId;
  function checkScrollPosition() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    // 这里替换成你的判断逻辑，比如滚动超过100px时固定头部
    if (scrollTop > 100) {
      document.querySelector('.header').classList.add('is-fixed');
    } else {
      document.querySelector('.header').classList.remove('is-fixed');
    }
    rafId = requestAnimationFrame(checkScrollPosition);
  }
  
  // 滚动时启动/重置检测循环
  window.addEventListener('scroll', () => {
    cancelAnimationFrame(rafId);
    rafId = requestAnimationFrame(checkScrollPosition);
  });
  // 触摸开始时也启动，防止惯性滚动前没触发检测
  window.addEventListener('touchstart', () => {
    cancelAnimationFrame(rafId);
    rafId = requestAnimationFrame(checkScrollPosition);
  });
  

• 这个方法利用了requestAnimationFrame和浏览器渲染同步的特性，在惯性滚动期间也能持续执行检测逻辑。

3. 监听scrollend事件（iOS 16.4+支持） #

• iOS 16.4及之后的版本支持了scrollend事件，这个事件会在滚动（包括惯性滚动）完全停止时触发。如果你的需求允许只在滚动结束后调整头部状态，或者结合scroll事件+scrollend事件来处理：
• 思路：在scroll事件里处理手指触碰时的实时滚动状态，然后在scrollend事件里做最终的状态修正，确保惯性滚动结束后头部位置正确。
• 用法示例：

  function updateHeader(scrollTop) {
    // 这里写你的头部定位逻辑
    if (scrollTop > 100) {
      document.querySelector('.header').classList.add('is-fixed');
    } else {
      document.querySelector('.header').classList.remove('is-fixed');
    }
  }
  
  window.addEventListener('scroll', () => {
    const scrollTop = window.pageYOffset;
    updateHeader(scrollTop);
  });
  
  window.addEventListener('scrollend', () => {
    const scrollTop = window.pageYOffset;
    updateHeader(scrollTop);
  });
  

• 缺点是兼容性有限，如果需要支持老版本iOS，这个方法就不太适用。

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