使用原生JS实现折叠内容后滚动窗口使展开div对齐原折叠按钮位置

之前方法失效的核心原因 #

• 硬编码固定偏移（如scrollBy(0, -1800)）存在两个偏差：一是折叠块的实际渲染高度可能和预估的1800px有细微误差，二是内容被移除/隐藏时浏览器会自动调整滚动位置，这时候再反向计算偏移量会完全错位，导致页面直接跳到更下方。
• offsetTop 是相对于元素最近的定位父级的坐标，并非文档全局的绝对坐标，直接用会出现计算偏差。
• scrollIntoView() 默认会把元素对齐到视口顶部，还会自动调整相邻边距，无法精准让元素停留在之前点击折叠按钮的视口位置。

正确实现步骤 #

1. 时序优先：一定要在移除/隐藏折叠块内容之前，先记录两个关键基准值，避免DOM变化后基准丢失
   • 点击时鼠标在视口的纵向位置e.clientY：这个值是相对于视口坐标系的，不会因为页面内容变化产生偏移，就是最终要让展开按钮对齐的视口位置
   • 此时展开按钮在文档流中的绝对纵向坐标：注意不能直接用offsetTop，需要逐层累加元素相对父级的偏移值，得到全局文档坐标
2. 执行折叠逻辑：移除或者隐藏大尺寸折叠块，等待DOM布局计算稳定
3. 计算新的布局基准：DOM更新完成后，重新计算展开按钮在新文档流中的绝对纵向坐标
4. 精准计算滚动目标：最终滚动位置 = 展开按钮的新文档绝对Y值 - 目标视口对齐位置（也就是之前记录的e.clientY）
5. 调用window.scrollTo直接滚动到计算出的目标值即可，不需要依赖第三方库。

可直接复用的原生JS代码 #

var btnCollapse = document.getElementById('detail-collapse');
var btnExpand = document.getElementById('detail-expand');

// 计算元素在文档中的绝对纵向坐标
function getAbsPageY(el) {
    let y = 0;
    while(el) {
        y += el.offsetTop;
        el = el.offsetParent;
    }
    return y;
}

btnCollapse.addEventListener('click', (e) => {
    // 1. 内容变更前记录基准值
    const targetViewportY = e.clientY;

    // 2. 执行折叠内容隐藏/移除逻辑（替换为你自己的业务代码）
    // ...

    // 3. DOM更新完成后重新计算展开按钮的绝对坐标
    const newExpandAbsY = getAbsPageY(btnExpand);

    // 4. 计算精准滚动位置并执行
    const targetScrollTop = newExpandAbsY - targetViewportY;
    window.scrollTo({
        top: targetScrollTop,
        behavior: 'auto' // 需要平滑滚动可改为'smooth'
    });
});

注意事项 #

• 如果是通过display: none隐藏折叠块，浏览器会同步完成布局计算，直接取值即可，不需要等待额外的渲染周期。
• 如果涉及到异步DOM更新，可将滚动逻辑放入requestAnimationFrame中执行，确保布局计算完成后再取值，避免出现坐标偏差。

内容的提问来源于stack exchange，提问作者Rob de Jonge