jQuery addClass在移动端不生效 滚动触发动画仅桌面可用

• 移动端滚动事件触发机制限制：多数移动端浏览器为了优化滚动流畅度，会在滚动过程中暂停JavaScript执行，仅在滚动停止后才触发scroll事件，导致绑定的回调逻辑无法实时执行。
• 类名操作逻辑被浏览器优化：你当前使用的先移除donut-segment类再立即添加同一个类的操作，会被移动端WebKit内核判定为无实际DOM变更，自动合并两次操作，不会触发样式重绘，因此动画无法触发。
• 视口高度计算不准确：jQuery的$(window).height()在移动端地址栏折叠/展开时取值会出现偏差，导致isScrolledIntoView的判断结果不符合预期。
• 部分移动端浏览器的滚动回弹效果会干扰scrollTop的取值准确性，进一步影响元素位置判断。

优先推荐使用原生Intersection ObserverAPI，该API专门用于监听元素与视口的交叉状态，性能远优于滚动事件监听，移动端兼容性覆盖安卓5.0+、iOS 12.1+，完全满足绝大多数场景需求，实现代码如下：

// 初始化交叉观察器
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 元素进入视口时触发逻辑
    if (entry.isIntersecting) {
      // 建议新增独立的激活类触发动画，不要重复操作基础类
      $('#don').addClass('donut-segment-active');
      // 如果仅需要触发一次动画，可在触发后取消观察
      observer.unobserve(entry.target);
    }
  })
}, {
  threshold: 0.1 // 可自定义触发阈值，代表元素10%进入视口时触发
})

// 绑定要观察的目标元素
observer.observe(document.querySelector('#don'));

对应的CSS需要将动画逻辑绑定到新增的激活类上，示例：

.donut-segment {
  /* 元素基础样式 */
}
.donut-segment-active {
  /* 动画相关样式 */
  animation: donutAni 1s ease forwards;
}

如果需要兼容极老旧的移动设备，必须使用滚动事件方案，可做如下优化：

1. 替换视口高度计算逻辑，用window.innerHeight替代$(window).height()，取值更准确
2. 给滚动事件添加节流逻辑，降低性能消耗
3. 新增独立的激活类触发动画，避免操作同一个类名被浏览器优化
   优化后的代码示例：

// 元素进入视口判断函数
function isScrolledIntoView(elem) {
    const docViewTop = $(window).scrollTop();
    const docViewBottom = docViewTop + window.innerHeight;
    const elemTop = $(elem).offset().top;
    const elemBottom = elemTop + $(elem).height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
};

// 滚动事件加节流
let scrollTimer = null;
$(window).scroll(function () {
  if (scrollTimer) return;
  scrollTimer = setTimeout(() => {
    scrollTimer = null;
    const target = $('#don');
    if (isScrolledIntoView(target) && !target.hasClass('donut-segment-active')) {
      target.addClass('donut-segment-active');
    }
  }, 100)
});

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