IntersectionObserver是浏览器原生提供的构造函数，接受两个参数：callback是可见性变化时的回调函数，option是配置对象（该参数可选）。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6"></script> -->

    <title>intersectionObserver</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        div {

            margin: 0 auto;

            max-width: 100%;

            width: 600px;

        }

        #top {

            height: 600px;

            background-color: #aaaaaa;

        }

        #middle {

            margin-top: 200px;

            opacity: 0;

            height: 800px;

            background-color: #000000;

        }

        #bottom {

            height: 200px;

            background-color: #333;

        }

        div.move,

        #top.move,

        #middle.move,

        #bottom.move {

            animation: movefromleft 2s;

            animation-fill-mode: forwards;

        }

        @keyframes movefromleft {

            from {

                opacity: 0;

                transform: translateX(-300px);

            }

            to {

                opacity: 1;

                transform: translateX(0px);

            }

        }

    </style>

</head>

<body>

    <div id="top"></div>

    <div id="middle"></div>

    <div id="bottom"></div>

    <div id="b_B"></div>

</body>

<script>

    window.onload = (event) => {

        const middle = document.getElementById('middle'),

            top = document.getElementById('top'),

            bottom = document.getElementById('bottom');

        var last = document.getElementById('b_B')

        const animationClass = 'move';

        // 创建监听

        const intersectionObserver = new IntersectionObserver((entries) => {

            for (entry of entries) {

                if (entry.target.id == 'b_B' && entry.intersectionRatio > 0) {

                    var c = document.createElement('div');

                    c.style.cssText = "border:1px solid black; background-color: pink; height: 100px;";

                    document.querySelector('body').appendChild(c)

                    bottom.parentNode.insertBefore(c, bottom)

                    intersectionObserver.observe(c);

                    addAnimationClass(entry.target, animationClass)

                }

                if (entry.intersectionRatio > 0) {

                    console.log('====================================');

                    console.log(entry.target);

                    console.log('====================================');

                    addAnimationClass(entry.target, animationClass);

                } else {

                    removeAnimationClass(entry.target, animationClass);

                }

            }

        });

        // let attributesChangeEl = document.querySelector("body")

        // let config = { childList: true }

        // let observer1 = new MutationObserver(mutationsList => {

        //     last = mutationsList[0].addedNodes[0]

        // })

        // observer1.observe(attributesChangeEl, config)

        // 添加动画class的操作

        function addAnimationClass(elem, animationClass) {

            elem.className.includes(animationClass) ? 1 : elem.className = elem.className  + animationClass;

        }

        // 移除动画class的操作

        function removeAnimationClass(elem, animationClass) {

            elem.className.includes(animationClass) ? elem.className = elem.className.replace(animationClass, '') : 1;

        }

        // 开启监听

        intersectionObserver.observe(top);

        intersectionObserver.observe(middle);

        intersectionObserver.observe(last);

    }

</script>

</html>

使用IntersectionObserver 实现下拉加载更多的更多相关文章

  1. Windows Phone 8.1开发：如何让ListView下拉加载更多？

    Windows Phone 8.1开发中使用ListView作为数据呈现载体时,经常需要一个下拉(拇指向上滑动)加载更多的交互操作.如何完成这一操作呢?下面为您阐述. 思路是这样的: 1.在ListV ...

  2. ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...

  3. iscroll.js实现上拉刷新，下拉加载更多，应用技巧项目实战

    上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...

  4. jquery实现下拉加载更多

    下拉加载更多这种原理很容易想明白,但是不自己写一个简单的,老是不踏实,获取什么高度再哪里获取之类的.于是自己简单写了个,就是页面上有几个div,然后当滚动条拉到某个位置的时候,再继续加载div.顺便又 ...

  5. 下拉加载更多DEMO(js实现)

    项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判 ...

  6. dropload.js下拉加载更多

    项目中有用到下拉加载更多的地方,去网上找了一个插件,地址:http://ons.me/526.html总体还是不错的,可能自己不是特别了解这个插件,做项目时,也是遇到了无数问题.项目中要用的是两个ta ...

  7. H5页面下拉加载更多(实用版)

    近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有.   醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件  还可以,但是 ...

  8. JQ下拉加载更多

    <!DOCTYPE=html> <html> <head> <script src="jquery-1.4.2.min.js" type= ...

  9. 微信小程序实现上拉和下拉加载更多

    在上一篇文章中,我们知道了使用 scroll-view 可以实现上拉加载更多,但是由于 scroll-view 的限制,它无法实现下拉加载更多,这篇文章我们使用 view 组件来实现 上拉和下拉加载更 ...

随机推荐

  1. 怎么将PPT文件上传到微信公众号上？

    我们都知道创建一个微信公众号,在公众号中发布一些文章是非常简单的,但公众号添加附件下载的功能却被限制,如今可以使用小程序“微附件”进行在公众号中添加附件. 以下是公众号添加附件使用“微附件”小程序的教 ...

  2. Prometheus监控神器-Rules篇

    本章主要对如何使用Prometheus与Alertmanager组件集成配置,以及对警报规则 Rules 的俩种类型及其模板内容进行讲解. 与Alertmanager集成 Prometheus把产生的 ...

  3. 2020-05-24：ZK分布式锁有几种实现方式？各自的优缺点是什么？

    福哥答案2020-05-24: Zk分布式锁有两种实现方式一种比较简单,应对并发量不是很大的情况.获得锁:创建一个临时节点,比如/lock,如果成功获得锁,如果失败没获得锁,返回false释放锁:删除 ...

  4. Java indexof

    java中字符串方法 indexof() indexof()可以返回输入的字符串在目标字符串中第一次出现的位置,如果没有出现返回int 0:

  5. centos go 安装 使用

    #goland 确保能ping通百度[root@z my_project]# vi /etc/resolv.conf# Generated by NetworkManagersearch locald ...

  6. Redis哨兵模式的配置

    绪论 现有三台设备,192.168.137.11.192.168.137.12和192.168.137.13,要求在三台设备上实现redis哨兵模式,其中192.168.137.11为master,其 ...

  7. Python 判断ip是否属于网段

    import IPy >>>'192.168.1.100' in IPy.IP('192.168.1.0/24') is True >>>'192.168.1.0/ ...

  8. 将Darknet编译成API形式的so文件

    Makefile: GPU= CUDNN= OPENCV= OPENMP= DEBUG= ARCH= -gencode arch=compute_30,code=sm_30 \ -gencode ar ...

  9. Java算法——回溯法

    回溯法一种选优搜索法,又称试探法.利用试探性的方法,在包含问题所有解的解空间树中,将可能的结果搜索一遍,从而获得满足条件的解.搜索过程采用深度遍历策略,并随时判定结点是否满足条件要求,满足要求就继续向 ...

  10. “网络巨轮”BGP的高级装备（增强配置）

    引入 如下图在很多时候,BGP建立对等体的时候,要去建立大量的EBGP和IBGP对等体,IBGP还要全连接,这就给我们带来了大量重复的工作,路由表就会变得很庞大,区域内和区域之间就会很难管理,以下这些 ...