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

JavaScript canvas to achieve code rain effect

JavaScript to achieve full screen page scrolling effect

JavaScript canvas to achieve code rain effect

Ubuntu regularly executes Python script example code

Linux uses the scp command to copy files to the local computer and copy local files to the remote server

MySQL: mysql functions

Vue implements a movable floating button

Flash embedded in HTML Solution for embedding Flash files in HTML web page code (Part 1)

How to configure tomcat server for eclipse and IDEA

How to write the style of CSS3 Tianzi grid list

Detailed explanation of Angular routing animation and advanced animation functions

Solutions to problems using addRoutes in Vue projects

Recommend

MySql 5.6.36 64-bit green version installation graphic tutorial

MySQL uses mysqldump+binlog to completely restore the deleted database principle analysis

HTML+CSS to achieve the special effects code of the blood-sharingan and samsara eye

The difference between html block-level tags and inline tags

A record of the pitfalls of the WeChat applet component life cycle

How to use selenium+testng to realize web automation in docker

Detailed explanation of screen command usage in Linux

Django2.* + Mysql5.7 development environment integration tutorial diagram

A detailed discussion of components in Vue

How to implement insert if none and update if yes in MySql

MySQL configuration master-slave server (one master and multiple slaves)

Django uses pillow to simply set up verification code function (python)

Four completely different experiences in Apple Watch interaction design revealed

How to use mysqldump to backup MySQL data

Detailed tutorial for installing mysql5.7.21 under Windows