js 判断浏览器滚动触底操作，并触发加载框

最新推荐文章于 2022-09-19 15:54:35 发布

原创最新推荐文章于 2022-09-19 15:54:35 发布 · 805 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 同时被 2 个专栏收录

346 篇文章

订阅专栏

前端

342 篇文章

订阅专栏

本文介绍如何使用jQuery简化移动端滚动事件检测，当用户滚动到底部时，实现加载更多效果并包含一个自定义的加载动画。

这个其实在移动端浏览器用的还是比较多的

我这边引入了一个jquery 来少写一些代码偷个懒

其实触底就是判断用户滚动的距离加上屏幕的高度等于文档document的总高度的话那就是到底部了

html代码

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            height: 2000px;
            width: 100%;
            border: 1px solid #f00;
        }
        .load {
            height: 3rem;
            width: 3rem;
            border-radius: 50%;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-top: -1rem;
            margin-left: -1rem;
            border-top: .2rem solid #666;
            border-bottom: .2rem solid #eee;
            border-left: .2rem solid #eee;
            border-right: .2rem solid #eee;
            animation: load 1s linear infinite;
        }
        @keyframes load {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>

我还手动创建了一个加载框哈哈


<div class="container">

</div>
    <script>
        var flag = false;
        $(window).on('scroll', function() {
            var scrollTop = $(window).scrollTop(); //滚动的高度
            var height = $(window).height(); // 屏幕的高度
            var docHeight = $(document).height();

            if((scrollTop + height) == docHeight) {
                console.log('触底了');
                if(!flag) {
                    flag = true;
                    var div = document.createElement('div');
                    div.className = "load";
                    document.body.appendChild(div);
                    setTimeout(() => {
                        flag = false;
                        div.parentNode.removeChild(div);
                    }, 3000)
                }
                
                
                
            }
        })
    </script>

关注我持续更新前端知识