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

Implementation of FIFO in Linux process communication

JavaScript to achieve full screen page scrolling effect

Implementation of FIFO in Linux process communication

How to choose and use PNG, JPG, and GIF as web image formats

MySQL 8.0.11 installation summary tutorial diagram

Discussion on more reasonable creation rules for MySQL string indexes

Example code for converting http to https using nginx

How to delete an image in Docker

Web development tutorial cross-domain solution detailed explanation

A mobile adaptive web page effect solves the problem of small display page

mysql: [ERROR] unknown option '--skip-grant-tables'

Tools to convert static websites into RSS

Recommend

How to remove the blue box that appears when the image is used as a hyperlink

Analysis of the principle of MySQL large table extraction mode from the perspective of cloud data migration service

Vue's detailed code for implementing the shuttle box function

How to set up remote access to a server by specifying an IP address in Windows

How to make a div height adaptive to the browser height

How to configure Nginx to distinguish between PC or mobile phone access to different domain names

How to deploy HTTPS for free on Tencent Cloud

A brief discussion on the correct approach to MySQL table space recovery

Does Mysql ALTER TABLE lock the table when adding fields?

jQuery achieves large-screen scrolling playback effect

How to fix the WeChat applet input jitter problem

Docker uses root to enter the container

Solve the problem of MySql client exiting in seconds (my.ini not found)

Linux kernel device driver kernel time management notes

Solution for Nginx installation without generating sbin directory