JavaScript to achieve full screen page scrolling effect

JavaScript to achieve full screen page scrolling effect

After I finished reading JavaScript DOM, I had a deeper understanding of the interpreted JavaScript scripting language, and made my JavaScript code more standardized.

Next, let’s move on to the technical issue I want to share with you today: scrolling on a full-screen page.

The implemented code is very simple, but discovering the problems therein requires long-term experience, reading experience, and the programmer's rich imagination.

Let's first take a look at the two final renderings and the content printed by console.log:

1. Click on page 2 effect and print result:

After clicking, a string of values ​​printed in the pagelist[this.index].rollCount timer is Math.ceil(rollData.num); after 5 seconds, another counter is automatically executed to clear the pagelist[this.index].rollCount timer.

2. Click Page 2 again, and the printed result:

After clicking, it will first check whether the pagelist[this.index].rollCount timer exists, and if it does, it will be cleared; if the page corresponding to the click has been reached, it will print out that it is not executed and return.

Please see the examples below for details, where various situations have been explained in detail.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Full screen page turning effect</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
 
        html, body {
            width: 100%;
            height: 100%;
            color: #fff;
        }
 
        ul {
            list-style: none
        }
 
        #nav {
            position: fixed;
            top: 50px;
            left: 50px;
        }
 
        #nav li {
            width: 80px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border: 2px solid #fff;
            cursor: pointer;
        }
 
        #nav li:nth-child(1) {
            background: #f60;
        }
 
        #nav li:nth-child(2) {
            background: #63c;
        }
 
        #nav li:nth-child(3) {
            background: #3c6;
        }
 
        #nav li:nth-child(4) {
            background: #f9c;
        }
 
        #page {
            width: 100%;
            height: 100%;
        }
 
        #page li {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<ul id="page">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul id="nav">
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Page 4</li>
</ul>
<script>
    function rollingPage() {
        var pageul = document.getElementById("page");
        var pagelist = pageul.children;
 
        var navul = document.getElementById("nav");
        var navlist = navul.children;
 
        for (i = 0; i < navlist.length; i++) {
            //Get all styles getComputedStyle
            var bgcolor = getComputedStyle(navlist[i], "").backgroundColor;
// alert(bgcolor);
            pagelist[i].style.background = bgcolor;
 
            //Define an index object for the current element and save the subscript of the current element navlist[i].index = i;
 
            //Declare variables as objects var rollData = {
                num: 0,
                target: 0
            };
            navlist[i].onclick = function () {
 
                //The distance between the page corresponding to the clicked button and the top of the entire page rollData.target = pagelist[this.index].offsetTop;
 
                //Determine whether the clicked element is the current one. If so, do not continue executing var h = window.innerHeight || document.documentElement.clientHeight 
                    || document.body.clientHeight;
                var x = this.index;
                //Judge whether the page corresponding to the currently clicked button has an element attribute timer if (pagelist[this.index].rollCount) {
                    console.log("exists");
                    clearInterval(pagelist[this.index].rollCount);
 
                    /*Prevent continuous clicks from causing direct return and causing the page to not load completely, so add a judgment to prevent it.
                     * In this way, even if the page is not fully reached, even after the above is cleared,
                       *The counter pagelist[this.index].rollCount will also be executed downwards
                     * */
                    /*But I found that things will never be perfect and need to be constantly improved.
                     *At the moment when I was chatting with my friend, I clicked the button corresponding to the current page again.
                       *But I found that the return below was not executed.
                     *Look again at the value of Math.ceil(rollData.num) printed in the counter, which is 1.
                     *Therefore, Math.ceil(rollData.num) + 1 == h * x || 
                     *Math.ceil(rollData.num) - 1 == h * x
                     *
                     * Another reason for this is that,
                       * at window.scrollTo(0, Math.ceil(rollData.num) + 1)
                     * and after subtracting one and not adding alkali, the saved value is Math.ceil(rollData.num) without adding alkali.
                     * */
                    if (Math.ceil(rollData.num) + 1 == h * x || 
                             Math.ceil(rollData.num) - 1 == h * x || 
                                   Math.ceil(rollData.num) == h * x) {
                        console.log("Not executed");
                        //If it exists and the value the scroll bar scrolls to is equal to the current page,
                          //The counter is not executed downwards.
                        return;
                    }
                }
 
                //Timer to scroll the page pagelist[this.index].rollCount = setInterval(function () {
                    //Math.ceil() rounds in the direction of greater than rollData.num = rollData.num + 
                                     (rollData.target - rollData.num) / 10;
                    console.log(Math.ceil(rollData.num));
              //1. Move the scroll bar to the position of h*x, window.scrollTo()
             //2. Determine the case where the absolute value of the rollData.num attribute after being taken by Math.ceil is 1 before and after x*h. //The reason for the above 2 operations is that when printing the value of Math.ceil(rollData.num), it is found that sometimes //the difference between the value before and after x*h is 1
                    if (Math.ceil(rollData.num) + 1 == h * x) {
                        window.scrollTo(0, Math.ceil(rollData.num) + 1);
                    } else if (Math.ceil(rollData.num) - 1 == h * x) {
                        window.scrollTo(0, Math.ceil(rollData.num) - 1);
                    } else {
                        window.scrollTo(0, Math.ceil(rollData.num));
                    }
                }, 30);
 
                /*After 5 seconds, if the conditions are met, the pagelist[x].rollCount counter can be cleared to prevent the upper counter from running continuously* */
                setTimeout(function () {
                    //After five seconds, if Math.ceil(rollData.num) and the difference between the previous and the next is 1,
                        // Clear the timer above if (Math.ceil(rollData.num) + 1 == h * x || 
                           Math.ceil(rollData.num) - 1 == h * x || 
                               Math.ceil(rollData.num) == h * x) {
                        console.log("Automatically clear" + x);
                        clearInterval(pagelist[x].rollCount);
                    }
                }, 5000);
            }
        }
    }
 
    addLoadEvent(rollingPage);
    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function () {
                oldonload();
                func();
            }
        }
    }
</script>
</body>
</html>

After completing the above optimization, I found that I still need to read more books in the future, go to open source websites to read codes written by experts, and constantly use my imagination to improve my own code.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • js to achieve full screen of simple page
  • js simulates F11 page full screen display
  • js controls the full screen display of the page and the method of exiting the full screen display
  • javascript full screen method to display page elements in full screen
  • JS implements the method of judging that the scroll bar has scrolled to the bottom of the page and executing the event
  • js, jquery scroll/jump page to the specified position implementation ideas
  • js monitors the scrolling event method of HTML page
  • When the scroll bar scrolls to the bottom of the page, the js code for automatically adding content is loaded
  • js determines whether the scroll bar has reached the bottom or top of the page
  • js implements scroll bar to scroll to the bottom of the page to continue loading

<<:  How to set the width and height of html table cells

>>:  Detailed Analysis of the Selection of MySQL Common Index and Unique Index

Recommend

MySQL intercepts the sql statement of the string function

1. left(name,4) intercepts the 4 characters on th...

Analyzing the node event loop and message queue

Table of contents What is async? Why do we need a...

Implementing form submission without refreshing the page based on HTML

Using ajax to implement form submission without re...

Linux Jenkins configuration salve node implementation process diagram

Preface: Jenkins' Master-Slave distributed ar...

Example of using swiper plugin to implement carousel in Vue

Table of contents vue - Use swiper plugin to impl...

Centos8 builds nfs based on kdc encryption

Table of contents Configuration nfs server (nfs.s...

Analysis of the cutting of the background image of the nine-square grid with adaptive width and height

<br />Based on the original width-and-height...

A brief discussion on HTML titles, paragraphs, line breaks, horizontal lines, and special characters

title XML/HTML CodeCopy content to clipboard <...

The difference between key and index in MySQL

Let's look at the code first: ALTER TABLE rep...

Create a custom system tray indicator for your tasks on Linux

System tray icons are still a magical feature tod...

Detailed explanation of Mybatis special character processing

Preface: Mybatis special character processing, pr...

Summary of knowledge points related to null (IFNULL, COALESCE and NULLIF) in MySQL

This article uses examples to explain the knowled...

Detailed explanation of how to use binlog2sql to quickly roll back after MySQL misoperation

Preface In daily work or study, it is inevitable ...

Django+mysql configuration and simple operation database example code

Step 1: Download the mysql driver cmd enters the ...

Example of implementing the skeleton screen of WeChat applet

Table of contents What is a skeleton screen How t...