Arc浏览器（Chromium内核）window.innerHeight滚动动画异常问题求助

问题背景 #

带有anim类的div元素，未进入视口时需添加hidden类，进入视口后切换为visible类。该逻辑在Chrome、Safari、Edge及iPhone版Arc中正常，但桌面版Arc浏览器无法正确检测元素位置，导致元素始终处于hidden状态。现有实现依赖滚动监听结合getBoundingClientRect()判断元素位置。

解决方案 #

方案1：改用Intersection Observer API（推荐） #

传统滚动监听在部分浏览器中可能存在触发时机或精度问题，Intersection Observer是浏览器原生的元素交叉检测API，性能更优且兼容性更可靠，能精准判断元素与视口的交互状态。

代码示例：

// 初始化Intersection Observer
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入视口，切换状态
      entry.target.classList.add('visible');
      entry.target.classList.remove('hidden');
    } else {
      // 元素离开视口，切换状态
      entry.target.classList.remove('visible');
      entry.target.classList.add('hidden');
    }
  });
}, {
  root: null, // 以视口作为根容器
  threshold: 0.1, // 元素10%进入视口时触发回调
  rootMargin: '0px 0px -20% 0px' // 模拟原逻辑中"提前20%视口高度触发"的规则
});

// 获取所有目标元素并启动监听
const animDivs = document.querySelectorAll('.anim');
animDivs.forEach(div => {
  // 初始化状态为hidden
  div.classList.add('hidden');
  observer.observe(div);
});

方案2：修复现有滚动监听逻辑 #

现有代码可能存在视口高度获取或判断逻辑的兼容性问题，可做以下调整：

1. 替换window.innerHeight为更兼容的document.documentElement.clientHeight
2. 修正不合理的判断分支（原逻辑中元素完全在视口上方时也设置为visible，不符合需求）

修改后的代码：

let animDivs;

function handleScroll() {
  // 兼容多浏览器的视口高度获取方式
  const windowHeight = document.documentElement.clientHeight || window.innerHeight;

  animDivs.forEach((animDiv) => {
    const animDivRect = animDiv.getBoundingClientRect();
    const animDivTop = animDivRect.top;
    const animDivBottom = animDivRect.bottom;

    // 判断元素是否进入触发区域（顶部小于视口80%，且底部未完全移出视口）
    const shouldBeVisible = animDivTop < windowHeight * 0.8 && animDivBottom > 0;
    if (shouldBeVisible) {
      animDiv.classList.add('visible');
      animDiv.classList.remove('hidden');
    } else {
      animDiv.classList.remove('visible');
      animDiv.classList.add('hidden');
    }
  });
}

// 确保DOM加载完成后再初始化
document.addEventListener('DOMContentLoaded', () => {
  animDivs = document.querySelectorAll('.anim');
  // 初始执行一次，设置正确的初始状态
  handleScroll();
  // 绑定滚动和窗口 resize 监听
  window.addEventListener('scroll', handleScroll);
  window.addEventListener('resize', handleScroll);
});

方案3：强制初始化元素状态 #

部分情况下，Arc浏览器可能在元素未完全渲染时就执行初始判断，导致状态异常。可在页面完全加载后强制设置初始状态并执行检测：

window.addEventListener('load', () => {
  const animDivs = document.querySelectorAll('.anim');
  // 强制设置初始隐藏状态
  animDivs.forEach(div => div.classList.add('hidden'));
  // 立即执行一次滚动检测
  handleScroll();
});

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