Chrome/Mozilla本地无限滚动正常，Safari及Heroku部署后异常求助

你的无限滚动在Safari/移动端异常，核心原因是浏览器兼容性差异（滚动位置计算、Intersection Observer行为）和部署环境的细微差异，以下是针对性修复方案：

1. 修复滚动位置计算的兼容性问题 #

Safari对document.body.offsetHeight和window.scrollY的处理和Chrome存在差异，改用兼容多浏览器的文档高度计算方式，避免误判滚动到底部：

修改checkInfiniteScroll方法：

checkInfiniteScroll() {
  if (!this.infiniteScrollPending) {
    this.infiniteScrollPending = true;
    requestAnimationFrame(() => {
      this.infiniteScrollPending = false;
      const buffer = 50;
      // 兼容多浏览器的文档高度计算
      const docHeight = Math.max(
        document.body.scrollHeight,
        document.body.offsetHeight,
        document.documentElement.clientHeight,
        document.documentElement.scrollHeight,
        document.documentElement.offsetHeight
      );
      const scrollPosition = window.scrollY + window.innerHeight;
      if (scrollPosition + buffer >= docHeight) {
        this.moveFirstSectionToBottom();
      }
    });
  }
}

2. 初始化滚动状态变量 #

原代码未初始化this.infiniteScrollPending，Safari中可能因变量未定义导致逻辑异常，在connect方法开头添加初始化：

connect() {
  this.prevScrollpos = window.scrollY;
  this.infiniteScrollPending = false; // 新增初始化
  this.navbarTarget.style.transform = "translateY(-100%)";
  // ... 其余代码保持不变
}

3. 优化Intersection Observer的重新观察逻辑 #

原代码每次移动section后断开所有观察再重新绑定，在Safari中可能触发延迟或冲突，改为仅重新观察被移动的元素：

修改moveFirstSectionToBottom方法：

moveFirstSectionToBottom() {
  const firstSection = document.getElementById(this.sectionIds[0]);
  if (firstSection) {
    firstSection.parentNode.appendChild(firstSection);
    const movedSectionId = this.sectionIds.shift();
    this.sectionIds.push(movedSectionId);
    
    // 先取消观察该元素，再重新观察，避免重复监听
    this.observer.unobserve(firstSection);
    // 确保DOM更新完成后再执行观察
    requestAnimationFrame(() => {
      this.observer.observe(firstSection);
    });
  }
}

4. 统一Navbar的样式控制逻辑 #

原代码混合使用transform和top属性控制navbar显示，Safari中可能出现渲染冲突，统一用transform：

修改handleScroll方法：

handleScroll() {
  let currentScrollPos = window.scrollY;
  if (this.prevScrollpos > currentScrollPos) {
    this.navbarTarget.style.transform = "translateY(0)";
  } else {
    this.navbarTarget.style.transform = "translateY(-100%)";
  }
  this.prevScrollpos = currentScrollPos;
}

5. 检查Heroku部署的资源与缓存 #

• 确认Stimulus控制器编译完整：重新部署前清除Heroku缓存，执行heroku repo:purge_cache后再部署
• 暂时禁用Turbo：若启用了Turbo，其页面替换逻辑可能和无限滚动冲突，可在目标页面或控制器中关闭Turbo

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