如何防止自动滚动隐藏的div答案

【问题标题】：How to prevent automatically scroll the hidden div如何防止自动滚动隐藏的div
【发布时间】：2023-02-17 19:15:24
【问题描述】：

为了提高性能，我没有创建很多 .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>

代码笔中的示例 https://codepen.io/merbin2012/pen/qBMdVKZ?editors=1000

我知道解决方案，我们可以保存最后的滚动点，当到达第一页时我们可以滚动，我们可以使用 scrolltotop，但是很难管理，因为我有 30 多页。

【问题讨论】：

等等……你有 30 多个按钮在说“显示第 N 页”？另外，是什么阻止您在可滚动元素上使用 .scrollTop = 0;？
你在这里犯的错误是你实际上不是在滚动一个 DIV，而是整个文档。所以你的前提是错误的。对所有页面使用 .page 代替，在 CSS 中将其设置为 overflow: auto; 现在您的所有页面都可以独立滚动。您最终可能想要做的是 scrollTop = 0;活动页面 - 如果需要。
@RokoC.Buljan 感谢您的评论，实际上，我正在将其用于我的 Cordova 应用程序。没有30个按钮显示每一页，每一页按钮都是相通的。我试着写“溢出：自动”，但它不起作用，请你在 codepen 链接中进行更改并提供吗？
尝试设置style="position:absolute; left:0; top:0; width:100vw; height:100vh; overflow:auto;"。

标签： javascript html jquery css cordova

【解决方案1】：

一种可能的方法：

创建一个 flexes 1 的主页面包装器（占用可用空间）
使用绝对位置并设置overflow: auto让你的页面相互重叠
当页面变成类"is-active"时，在上面使用scrollTop = 0

// DOM utility functions:

const el = (sel, par) => (par || document).querySelector(sel);
const els = (sel, par) => (par || document).querySelectorAll(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);


// Task: Pages 

const elToPage = el("#toPage");
const elPages = el("#pages");

const createPage = (page, i) => {
  const elPage = elNew("article", {
    className: "page",
    innerHTML: `<p><i>Page: ${i+1}</i></p>
                <h2>${page.title}</h2>
                <div>${page.body}</div>`
  });
  const elOption = elNew("option", {
    textContent: i+1,
    value: i,
  });
  
  elToPage.append(elOption);
  elPages.append(elPage);
};

const showPage = (index) => {
  elPages.querySelector(".page.is-active")?.classList.remove("is-active"); 
  elPages.children[index].scrollTop = 0;
  elPages.children[index].classList.add("is-active");
};

elToPage.addEventListener("input", (evt) => {
  showPage(+elToPage.value);
});
  
// Grab content and show first page
fetch("https://jsonplaceholder.typicode.com/posts")
  .then(res => res.json())
  .then(data => {
    data.forEach(createPage);
    showPage(0);
});

* { box-sizing: border-box; }

body {
  margin: 0; 
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#nav {
  background: gold;
  padding: 1rem;
}

#pages {
  position: relative;
  background: #ddd;
  flex: 1;
}

.page {
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  padding: 1rem;
  margin: auto;
  opacity: 0;
  transition: opacity 0.3s, scale 0.3s;
  scale: 0.7;
  pointer-events: none;
  font-size: 12vmin;
}

.page.is-active {
  opacity: 1;
  pointer-events: auto;
  scale: 1;
}

<nav id="nav">Page:
  <select id="toPage"></select>
</nav>
<main id="pages"></main>

【讨论】：