如何阻止隐藏div自动滚动？多页面前端场景技术求助

我为了优化性能，没有创建多个.html文件，而是把页面内容都放在div容器里，结构如下：

<div id="page1"> first page content</div>
<div id="page2"> first page content</div>
<div id="page3"> first page content</div>
<div id="page4"> first page content</div>

但遇到了问题：滚动第一个页面时，即使第二个页面处于隐藏状态，切换后第二个页面也会跟着滚动到对应位置。示例代码如下：

<button style="position:fixed" onclick="page1.style.display='none';page2.style.display='';">Show page 2</button>
<button style="position:fixed;margin-left:100px" onclick="page1.style.display='';page2.style.display='none';">Show page 1</button>

<div id="page1">
  <div>PAGE 1 -  1</div><div>PAGE 1 -  2</div><div>PAGE 1 -  3</div><div>PAGE 1 -  4</div><div>PAGE 1 -  5</div><div>PAGE 1 -  6</div><div>PAGE 1 -  7</div><div>PAGE 1 -  8</div><div>PAGE 1 -  9</div><div>PAGE 1 -  10</div><div>PAGE 1 -  11</div><div>PAGE 1 -  12</div><div>PAGE 1 -  13</div><div>PAGE 1 -  14</div><div>PAGE 1 -  15</div><div>PAGE 1 -  16</div><div>PAGE 1 -  17</div><div>PAGE 1 -  18</div><div>PAGE 1 -  19</div><div>PAGE 1 -  20</div><div>PAGE 1 -  21</div><div>PAGE 1 -  22</div><div>PAGE 1 -  23</div><div>PAGE 1 -  24</div><div>PAGE 1 -  25</div><div>PAGE 1 -  26</div><div>PAGE 1 -  27</div><div>PAGE 1 -  28</div><div>PAGE 1 -  29</div><div>PAGE 1 -  30</div><div>PAGE 1 -  31</div><div>PAGE 1 -  32</div><div>PAGE 1 -  33</div><div>PAGE 1 -  34</div><div>PAGE 1 -  35</div><div>PAGE 1 -  36</div><div>PAGE 1 -  37</div><div>PAGE 1 -  38</div><div>PAGE 1 -  39</div><div>PAGE 1 -  40</div><div>PAGE 1 -  41</div><div>PAGE 1 -  42</div><div>PAGE 1 -  43</div><div>PAGE 1 -  44</div><div>PAGE 1 -  45</div><div>PAGE 1 -  46</div><div>PAGE 1 -  47</div><div>PAGE 1 -  48</div><div>PAGE 1 -  49</div><div>PAGE 1 -  50</div><div>PAGE 1 -  51</div>
</div>

<div id="page2" style="display:none">
  <div>PAGE 2 -  1</div><div>PAGE 2 -  2</div><div>PAGE 2 -  3</div><div>PAGE 2 -  4</div><div>PAGE 2 -  5</div><div>PAGE 2 -  6</div><div>PAGE 2 -  7</div><div>PAGE 2 -  8</div><div>PAGE 2 -  9</div><div>PAGE 2 -  10</div><div>PAGE 2 -  11</div><div>PAGE 2 -  12</div><div>PAGE 2 -  13</div><div>PAGE 2 -  14</div><div>PAGE 2 -  15</div><div>PAGE 2 -  16</div><div>PAGE 2 -  17</div><div>PAGE 2 -  18</div><div>PAGE 2 -  19</div><div>PAGE 2 -  20</div><div>PAGE 2 -  21</div><div>PAGE 2 -  22</div><div>PAGE 2 -  23</div><div>PAGE 2 -  24</div><div>PAGE 2 -  25</div><div>PAGE 2 -  26</div><div>PAGE 2 -  27</div><div>PAGE 2 -  28</div><div>PAGE 2 -  29</div><div>PAGE 2 -  30</div><div>PAGE 2 -  31</div><div>PAGE 2 -  32</div><div>PAGE 2 -  33</div><div>PAGE 2 -  34</div><div>PAGE 2 -  35</div><div>PAGE 2 -  36</div><div>PAGE 2 -  37</div><div>PAGE 2 -  38</div><div>PAGE 2 -  39</div><div>PAGE 2 -  40</div><div>PAGE 2 -  41</div><div>PAGE 2 -  42</div><div>PAGE 2 -  43</div><div>PAGE 2 -  44</div><div>PAGE 2 -  45</div><div>PAGE 2 -  46</div><div>PAGE 2 -  47</div><div>PAGE 2 -  48</div><div>PAGE 2 -  49</div><div>PAGE 2 -  50</div><div>PAGE 2 -  51</div>
</div>

我知道可以通过保存每个页面的滚动位置、切换时调用scrollTo的方式解决，但页面数量超过30个，手动管理成本太高，求更优方案。

解决方案 #

方案1：用CSS定位替代display: none隐藏页面 #

不要用display: none隐藏页面，而是通过固定定位将页面移出视口，同时保留其滚动状态：

.page-hidden {
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.page-active {
  position: static;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

切换页面时只需给容器添加/移除上述类，无需手动处理滚动位置，页面的滚动状态会自动保留。

方案2：为每个页面设置独立滚动区域 #

让每个页面容器占满视口并独立滚动，彻底隔离各页面的滚动行为：

body, html {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}
.page-container {
  height: 100vh;
  overflow-y: auto;
  display: none;
}
.page-container.active {
  display: block;
}

每个页面的滚动都在自身容器内进行，切换时不会干扰其他页面的滚动状态，也不需要额外保存数据。

方案3：自动批量管理滚动位置 #

如果必须保留原有结构，用JS自动监听并保存所有页面的滚动位置，切换时自动恢复：

// 存储所有页面的滚动位置
const scrollPositions = {};

// 批量监听页面滚动事件
document.querySelectorAll('[id^="page"]').forEach(page => {
  page.addEventListener('scroll', () => {
    scrollPositions[page.id] = page.scrollTop;
  });
});

// 通用页面切换函数
function switchPage(fromId, toId) {
  const fromPage = document.getElementById(fromId);
  // 保存当前页面滚动位置
  scrollPositions[fromId] = fromPage.scrollTop;
  
  // 切换显示状态
  fromPage.style.display = 'none';
  const toPage = document.getElementById(toId);
  toPage.style.display = '';
  
  // 恢复目标页面滚动位置
  toPage.scrollTop = scrollPositions[toId] || 0;
}

修改按钮事件调用该函数即可：

<button style="position:fixed" onclick="switchPage('page1', 'page2')">Show page 2</button>
<button style="position:fixed;margin-left:100px" onclick="switchPage('page2', 'page1')">Show page 1</button>

该方案自动适配所有页面，无需逐个手动配置。

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