H5页面的一个scroll被隐藏，当重新显示时，如何保持原来的滚动位置不变呢？

在H5页面中，若需隐藏滚动区域后重新显示时保持原有滚动位置不变，可通过以下方案实现：

一、核心实现思路

1. ‌监听滚动事件并记录位置‌
   在滚动区域隐藏前，通过scroll事件实时记录滚动位置的scrollTop或scrollLeft值。
2. ‌存储滚动位置‌
   将滚动位置存储至变量或持久化存储（如localStorage）中。
3. ‌恢复滚动位置‌
   当滚动区域重新显示时，将存储的滚动位置值重新赋值给滚动容器。

二、具体实现步骤

1. HTML结构示例

<div id="scrollContainer" style="overflow: auto; height: 300px;">
  <!-- 长内容 -->
</div>
<button onclick="toggleScroll()">切换显示/隐藏</button>

2. JavaScript逻辑

let scrollPosition = 0; // 存储滚动位置
let isHidden = false; // 当前滚动区域是否隐藏

// 监听滚动事件
document.getElementById('scrollContainer').addEventListener('scroll', (e) => {
  if (!isHidden) {
    scrollPosition = e.target.scrollTop; // 记录纵向滚动位置
  }
});

// 切换显示/隐藏函数
function toggleScroll() {
  const container = document.getElementById('scrollContainer');
  isHidden = !isHidden;
  
  if (isHidden) {
    container.style.display = 'none'; // 隐藏滚动区域
  } else {
    container.style.display = 'block'; // 显示滚动区域
    // 延迟确保DOM渲染完成后再恢复滚动位置
    setTimeout(() => {
      container.scrollTop = scrollPosition;
    }, 0);
  }
}

三、关键注意事项

1. ‌隐藏方式选择‌
   若使用display: none隐藏元素，滚动位置会被重置，需依赖手动恢复；若改用visibility: hidden或opacity: 0，滚动位置可能被保留但需验证浏览器兼容性。
2. ‌异步恢复滚动位置‌
   在显示元素后，通过setTimeout延迟恢复滚动位置，确保DOM渲染完成后再操作。
3. ‌横向滚动处理‌
   若需支持横向滚动，替换scrollTop为scrollLeft即可。

四、兼容性优化方案

• ‌框架场景（如React/Vue）‌
  在组件生命周期或状态管理中存储滚动位置（如useState或ref）。
• ‌复杂交互场景‌
  结合Intersection Observer监听元素可见性变化，自动触发位置保存与恢复逻辑。

此方案通过简单的事件监听与状态管理，实现了滚动位置的持久化，适用于大多数H5页面场景。