Safari卸载元素innerHTML后滚动位置跳转问题求助

算力阿峰

2026-6-19

Safari（macOS/iOS）中卸载滚动上方章节导致滚动位置异常的解决方案

仅在macOS和iOS平台的Safari浏览器中出现此问题，其他浏览器无异常。使用Intersection Observer实现垂直滚动书籍的章节加载与卸载功能时，遇到以下问题：

初始卸载逻辑的问题

初始卸载非可视章节的函数如下：

function unloadChapter(chapterId) {
  const chapterElement = document.querySelector('.chapter[data-chapter-id="' + chapterId + '"] .chapter-content');
  if (chapterElement) {
    chapterElement.innerHTML = '';
  }
}

卸载当前位置下方的章节时无滚动卡顿，但卸载当前章节上方的内容时，Safari会因内容突然卸载导致滚动位置跳转。

尝试过的临时修复方案

尝试通过计算高度差调整滚动位置，但该方案会导致滚动时出现明显闪烁，且向上滚动至之前章节时无法正常工作：

function unloadChapter(chapterId) {
    const chapterElement = document.querySelector('.chapter[data-chapter-id="' + chapterId + '"] .chapter-content');
    if (chapterElement) {
        // 记录当前滚动高度
        const previousScrollHeight = document.documentElement.scrollHeight;
        // 记录当前滚动位置
        const previousScrollTop = window.scrollY || document.documentElement.scrollTop;
    
        // 卸载章节内容
        chapterElement.innerHTML = '';

        // 记录卸载后的滚动高度
        const newScrollHeight = document.documentElement.scrollHeight;

        // 计算高度差
        const scrollHeightDifference = previousScrollHeight - newScrollHeight;

        // 调整滚动位置
        window.scrollTo(0, previousScrollTop - scrollHeightDifference);
    }
}