用js实现滚动加载动画效果

滚动加载动画&无限加载

俗人844

4043人浏览 · 2022-11-23 20:57:56

俗人844 · 2022-11-23 20:57:56 发布

一、效果图

可以看出，在悠方滚动条滚动的时候，当高度打到一定高度的时候就会出现一个div盒子，就好像刚加载出来一样

而且可以一直向下滚动。

二、代码部分

1.html结构

    <div class="box">content1</div>
    <div class="box">content2</div>
    <div class="box">content3</div>
    <div class="box">content4</div>

因为主要是后面通过js添加节点，所以结构很简单

2.css样式部分

<style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100vw;
            overflow-x: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .box {
            width: 1200px;
            height: 500px;
            background-color: rgb(195, 135, 235);
            border-radius: 8px;
            font-size: 30px;
            text-align: center;
            line-height: 500px;
            margin-top: 20px;
            color: #fff;
            /* 添加过度效果 */
            transition: transform .5s ease;
        }

        /* 偶数 */
        .box:nth-child(even) {
            transform: translateX(-200%);
        }

        /* 奇数 */
        .box:nth-child(odd) {
            transform: translateX(200%);
        }
        
        .box.show-center {
            transform: translateX(0);
        }
    </style>

注意:因为是将div分别向左右移动了，所以在body的样式中，要加一个width:100vw;overflow-x:hidden,这样就不会出现横向滚动条。

最后写了一个 show-center的类名，当满足条件的时候添加这个类名，就能让当前div居中显示。

3.js部分

 <script>
        //在页面加载完毕后执行一次滚动加载函数
        window.onload = function () {
            scrollLoad()
        }
        //监听滚动
        window.addEventListener('scroll', scrollLoad)
        //定义数值
        var count = 5

        //滚动加载函数
        function scrollLoad() {
            // 1.获取所有的box
            var boxList = document.querySelectorAll('.box')
            //2. 定义一个目标值
            var targetValue = window.innerHeight * 0.8

            //3.获取每一个box距离浏览器顶部的值
            boxList.forEach(function (box) {
                var boxTop = box.getBoundingClientRect().top
                if (boxTop <= targetValue) {
                    box.classList.add('show-center')
                } else {
                    box.classList.remove('show-center')
                }
            })

            createBox()
        }

        //创建box函数
        function createBox() {
            //网页全文高度
            var pageHeight = document.documentElement.scrollHeight
            //滚动条被卷去的高度
            var stop = document.documentElement.scrollTop;
            //窗口高度
            var seeHeight = window.innerHeight
            //滚动条距离底部的高度
            var bottom = pageHeight - stop - seeHeight
            //如果高度小于200 就添加一个节点
            if (bottom <= 200) {
                var div = document.createElement('div')
                div.classList.add('box');
                div.innerHTML = 'content' + count;
                count++
                document.body.appendChild(div)
            }
        }
    </script>

1.在滚动函数：scrollLoad中用到了getBoundingClientRect().top

getBoundingClientRect() //获取元素位置，这个方法没有参数

该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；

top：元素上边到视窗上边的距离;

right：元素右边到视窗左边的距离;

bottom：元素下边到视窗上边的距离;

left：元素左边到视窗左边的距离;

width：是元素自身的宽

height是元素自身的高

这里我们只关注它的top值，前面定了一个目标值targetValue为页面高度的80%，当当前元素的高度小于这个高度时，给它添加show-center类使它回到居中的位置，如果小于的话，就删除这个类。

2.createBox() 函数用来判断滚动条的高度，如果距离底部小于200px的话就创建一个新节点添加到body中。

这样一个一直滚动一直更新节点的效果就完成了。

三、代码总结

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100vw;
            overflow-x: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

        }

        .box {
            width: 1200px;
            height: 500px;
            background-color: rgb(195, 135, 235);
            border-radius: 8px;
            font-size: 30px;
            text-align: center;
            line-height: 500px;
            margin-top: 20px;
            color: #fff;
            /* 添加过度效果 */
            transition: transform .5s ease;
        }

        /* 偶数 */
        .box:nth-child(even) {
            transform: translateX(-200%);
        }

        /* 奇数 */
        .box:nth-child(odd) {
            transform: translateX(200%);
        }

        .box.show-center {
            transform: translateX(0);
        }
    </style>
</head>

<body>
    <div class="box">content1</div>
    <div class="box">content2</div>
    <div class="box">content3</div>
    <div class="box">content4</div>

    <script>
        //在页面加载完毕后执行一次滚动加载函数
        window.onload = function () {
            scrollLoad()
        }
        //监听滚动
        window.addEventListener('scroll', scrollLoad)
        //定义数值
        var count = 5

        //滚动加载函数
        function scrollLoad() {
            // 1.获取所有的box
            var boxList = document.querySelectorAll('.box')
            //2. 定义一个目标值
            var targetValue = window.innerHeight * 0.8

            //3.获取每一个box距离浏览器顶部的值
            boxList.forEach(function (box) {
                var boxTop = box.getBoundingClientRect().top
                console.log(box.getBoundingClientRect());
                if (boxTop <= targetValue) {
                    box.classList.add('show-center')
                } else {
                    box.classList.remove('show-center')
                }
            })

            createBox()
        }

        //创建box函数
        function createBox() {
            //网页全文高度
            var pageHeight = document.documentElement.scrollHeight
            //滚动条被卷去的高度
            var stop = document.documentElement.scrollTop;
            //窗口高度
            var seeHeight = window.innerHeight
            //滚动条距离底部的高度
            var bottom = pageHeight - stop - seeHeight
            //如果高度小于200 就添加一个节点
            if (bottom <= 200) {
                var div = document.createElement('div')
                div.classList.add('box');
                div.innerHTML = 'content' + count;
                count++
                document.body.appendChild(div)
            }
        }
    </script>
</body>

</html>

感谢大家浏览！！！

腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Springboot+MySQL 实现从数据库获取数据展示到前端

1.运行效果效果图如下：2.创建数据库表数据库名为"springboot",数据库表名为"user"，数据库表里面放了5条数据，字段分别为：“id”，“name”，“age”，“email”。3.新建SpringBoot项目1、选择Spring Initial...

腾讯云开发者社区

腾讯云建官网：一个完整的自助建站的过程，不用代码，2小时就可以制作自己的网站

腾讯云开发者社区

数据库实验二数据库的简单查询和连接查询实验

– l）用Transact-SQL语句表示下列操作．在学生选课库中实现其数据查询操作．– ①求数学系学生的学号和姓名。select sno,sname from student where sdept='MA';– ②求选修了课程的学生学号。select distinct sno from sc;– ③求选修C1课程的学生学号和成绩，并要求对查询结果按成绩降序排列，如果成绩相同则按学号升序排列。s