Tips for stopping the hidden div from automatically scrolling

Question

Tips for stopping the hidden div from automatically scrolling

To optimize performance, I have decided not to create many .HTML files. Instead, I am putting the page content into a div so that it will display as follows:

<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>

However, I encountered an issue where the second page automatically scrolls when I scroll on the first page, even if the second page is hidden.

PAGE 1 - 1

PAGE 1 - 2

PAGE 1 - 3

PAGE 1 - 4

PAGE 1 - 5

PAGE 1 - 6

PAGE 1 - 7

PAGE 1 - 8

PAGE 1 - 9

PAGE 1 - 10

PAGE 1 - 11

PAGE 1 - 12

PAGE 1 - 13

PAGE 1 - 14

PAGE 1 - 15

PAGE 1 - 16

PAGE 1 - 17

PAGE 1 - 18

PAGE 1 - 19

PAGE 1 - 20

PAGE 1 - 21

PAGE 1 - 22

PAGE 1 - 23

PAGE 1 - 24

PAGE 1 - 25

PAGE 1 - 26

PAGE 1 - 27

PAGE 1 - 28

PAGE 1 - 29

PAGE 1 - 30

PAGE 1 - 31

PAGE 1 - 32

PAGE 1 - 33

PAGE 1 - 34

PAGE 1 - 35

PAGE 1 - 36

PAGE 1 - 37

PAGE 1 - 38

PAGE 1 - 39

PAGE 1 - 40

PAGE 1 - 41

PAGE 1 - 42

PAGE 1 - 43

PAGE 1 - 44

PAGE 1 - 45

PAGE 1 - 46

PAGE 1 - 47

PAGE 1 - 48

PAGE 1 - 49

PAGE 1 - 50

PAGE 1 - 51

I understand the solution requires saving the final scrolling point and implementing scroll functions, but with over 30 pages, managing this manually becomes very cumbersome.

javascript html jquery css cordova

Answer 1

Answer №1

In your provided HTML sample, an alternative method is to deal with your comment within the original post:

It may seem complex to save and scroll to the final position when returning to the first page, especially with over 30 pages.

A simpler solution involves: adding a page number attribute to each page element (representing your generated HTML content); creating a key/value object entry; associating the page number as the key and storing the scrollTop value before displaying another page element as the value.

const pageContainerEl = document.documentElement;

const savedScrollTops = {};

document.querySelectorAll("button[data-page-num]")
  .forEach(btn => btn.addEventListener("click", clickHandler));

setActivePage("1");

function clickHandler() {

   const pageNum = this.getAttribute("data-page-num");

  setActivePage(pageNum);
}

function setActivePage(pageNum) {

  pageNum = parseInt(pageNum, 10);

  if (!Number.isInteger(pageNum)) {
    return;
  }

  const activePageEl = document.querySelector(".page.active");

  if (activePageEl) {

    const activePageNum =
      parseInt(activePageEl.getAttribute("data-page-num"), 10);

    if (activePageNum === pageNum) {
      return;
    }

    if (Number.isInteger(activePageNum)) {
      savedScrollTops[`pageNum${activePageNum}`] =
        pageContainerEl.scrollTop;
    }

    activePageEl.classList.remove("active");
  }

  const pageEl = document.querySelector(`.page[data-page-num='${pageNum}']`);
  if (!pageEl) {
    return;
  }

  pageEl.classList.add("active");

  pageContainerEl.scrollTop =
    savedScrollTops[`pageNum${pageNum}`] || 0;
}

html {
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior */
  scroll-behavior: unset !important;
}

#button-controls {
  position: fixed;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1rem;
  width: fit-content;
}

.page {
  display: none;
}

.page.active {
  display: block;
}

<span id="button-controls">
    <button data-page-num="1">Show page 1</button>
    <button data-page-num="2">Show page 2</button>
</span>

<div id="page1" class="page" data-page-num="1">
...Content for Page 1...
</div>

<div id="page2" class="page" data-page-num="2">
...Content for Page 2...
</div>

Answer 2

In your provided HTML sample, an alternative method is to deal with your comment within the original post:

It may seem complex to save and scroll to the final position when returning to the first page, especially with over 30 pages.

A simpler solution involves: adding a page number attribute to each page element (representing your generated HTML content); creating a key/value object entry; associating the page number as the key and storing the scrollTop value before displaying another page element as the value.

const pageContainerEl = document.documentElement;

const savedScrollTops = {};

document.querySelectorAll("button[data-page-num]")
  .forEach(btn => btn.addEventListener("click", clickHandler));

setActivePage("1");

function clickHandler() {

   const pageNum = this.getAttribute("data-page-num");

  setActivePage(pageNum);
}

function setActivePage(pageNum) {

  pageNum = parseInt(pageNum, 10);

  if (!Number.isInteger(pageNum)) {
    return;
  }

  const activePageEl = document.querySelector(".page.active");

  if (activePageEl) {

    const activePageNum =
      parseInt(activePageEl.getAttribute("data-page-num"), 10);

    if (activePageNum === pageNum) {
      return;
    }

    if (Number.isInteger(activePageNum)) {
      savedScrollTops[`pageNum${activePageNum}`] =
        pageContainerEl.scrollTop;
    }

    activePageEl.classList.remove("active");
  }

  const pageEl = document.querySelector(`.page[data-page-num='${pageNum}']`);
  if (!pageEl) {
    return;
  }

  pageEl.classList.add("active");

  pageContainerEl.scrollTop =
    savedScrollTops[`pageNum${pageNum}`] || 0;
}

html {
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior */
  scroll-behavior: unset !important;
}

#button-controls {
  position: fixed;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1rem;
  width: fit-content;
}

.page {
  display: none;
}

.page.active {
  display: block;
}

<span id="button-controls">
    <button data-page-num="1">Show page 1</button>
    <button data-page-num="2">Show page 2</button>
</span>

<div id="page1" class="page" data-page-num="1">
...Content for Page 1...
</div>

<div id="page2" class="page" data-page-num="2">
...Content for Page 2...
</div>

Answer 3

Answer №2

Here is a potential solution:

Create a container for the main pages that expands to occupy all available space
Arrange the pages to overlap each other using absolute positioning and enable scrolling with overflow: auto

Whenever a page gets the class "is-active", set its scroll position to the top (scrollTop = 0)

// Helper functions:

const findElement = (selector, parent) => (parent || document).querySelector(selector);
const findAllElements = (selector, parent) => [...(parent || document).querySelectorAll(selector)];
const createNewElement = (tag, props) => Object.assign(document.createElement(tag), props);

// Task: Pages 

const pageSelector = findElement("#toPage");
const pagesContainer = findElement("#pages");

const createSinglePage = (pageData, index) => {
  const newPage = createNewElement("article", {
    className: "page",
    innerHTML: `<p><i>Page Number: ${index+1}</i></p>
                <h2>${pageData.title}</h2>
                <div>${pageData.body}</div>`
  });
  
  const optionForPage = createNewElement("option", {
    textContent: index+1,
    value: index,
  });
  
  pageSelector.append(optionForPage);
  pagesContainer.append(newPage);
};

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

pageSelector.addEventListener("input", (event) => {
  displayPage(+pageSelector.value);
});
  
// Fetch content and show first page
fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => response.json())
  .then(dataReceived => {
    dataReceived.forEach(createSinglePage);
    displayPage(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>

Answer 4

Here is a potential solution:

Create a container for the main pages that expands to occupy all available space
Arrange the pages to overlap each other using absolute positioning and enable scrolling with overflow: auto

Whenever a page gets the class "is-active", set its scroll position to the top (scrollTop = 0)

// Helper functions:

const findElement = (selector, parent) => (parent || document).querySelector(selector);
const findAllElements = (selector, parent) => [...(parent || document).querySelectorAll(selector)];
const createNewElement = (tag, props) => Object.assign(document.createElement(tag), props);

// Task: Pages 

const pageSelector = findElement("#toPage");
const pagesContainer = findElement("#pages");

const createSinglePage = (pageData, index) => {
  const newPage = createNewElement("article", {
    className: "page",
    innerHTML: `<p><i>Page Number: ${index+1}</i></p>
                <h2>${pageData.title}</h2>
                <div>${pageData.body}</div>`
  });
  
  const optionForPage = createNewElement("option", {
    textContent: index+1,
    value: index,
  });
  
  pageSelector.append(optionForPage);
  pagesContainer.append(newPage);
};

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

pageSelector.addEventListener("input", (event) => {
  displayPage(+pageSelector.value);
});
  
// Fetch content and show first page
fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => response.json())
  .then(dataReceived => {
    dataReceived.forEach(createSinglePage);
    displayPage(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>

Tips for stopping the hidden div from automatically scrolling

Answer №1

Answer №2

Similar questions

Tips for importing extensions with Rselenium

An error occurs with Three JS when trying to access a S3 Bucket used as a CDN due to Cross Origin

Play a diverse selection of audio variables at random

Invoking PHP code from within Javascript will output the function as a direct string

Error encountered while trying to embed SVG file

Anticipate the desired operations and propose appropriate function identifiers within a generalized class framework

Is it possible to apply a tailwind class that fades or transitions into something else after a specific duration?

Encountered an error with @angular-cli/ast-tools during the installation of angular-cli on a Mac running OS X (El Capitan

Modify the color of the text input border upon interaction using CSS

Consistently maintaining a uniform distance between icons and the border box is essential

How to dynamically change the title of a group box in Angular 8 using TypeScript

What is the best way to align the 5th and 6th list items to the left using CSS?

How does webpack identify the index.html file as the entry point for loading the bundle.js file?

Using a Default Value in a Destructured Function Parameter Results in a ReferenceError

React error message: "Cannot update state on a component that is not mounted" unless using the useEffect hook

Navigating to a precise element within a page in Angular with flawless redirection

Using jQuery, you can retrieve data from a specific sheet in Google Sheets API by executing a

function call should encompass the input content

Error: "Illuminate\Database\QueryException" - Unable to locate column with ID 1054 in Laravel 8

Ensure accuracy when converting to a float data type