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. 【av68676164（p55-p58)】 Intel CPU和Linux内存管理

    7.4.1 Intel CPU物理结构 https://www.cnblogs.com/megachen/p/9768115.html x86实模式 实模式 20位:1M内存空间 地址表示方式:段地址 ...

  2. 又一个小而美的Java Web框架: Solon!

    Solon 是Java世界里一个新的极易上手的Web框架.参考过 Javalin . Spring 等很多现有框架的设计. 取名自海贼王里的角色,说是希能像他一样能打 小.真的是小.最小的运行单位只有 ...

  3. 2020-07-06：一个6亿的表a，一个3亿的表b，通过外间tid关联，你如何最快的查询出满足条件的第50000到第50200中的这200条数据记录

    福哥答案2020-07-06:表a和表b的字段都是id和tid,数据类型都是int.查询结果顺序上以 表a 为准.1.JOIN.SELECT * FROM a JOIN b ON a.tid = b. ...

  4. 性能测试必备知识（11）- 怎么理解内存中的Buffer和Cache？

    做性能测试的必备知识系列,可以看下面链接的文章哦 https://www.cnblogs.com/poloyy/category/1806772.html 缓存 从 free 命令可以看到,缓存其实就 ...

  5. Virtuoso 中如何优化 Library Manager 的显示

    https://www.cnblogs.com/yeungchie/ 主要从 cds.lib 文件去入手. 假设现在想把 Virtuoso 预装的库整理到 preload 分类(库)中. 首先创建一个 ...

  6. myBatis源码解析-配置文件解析（6）

    前言 本来打算此次写一篇关于SqlSession的解析,但发现SqlSession涉及的知识太多.所以先结合mybatis配置文件(我们项目中常写的如mybatisConfig.xml),来分析下my ...

  7. jsp环境搭建及入门

    配置环境: 此处配置完成后startup.bat闪退,修改端口号重启后恢复正常 常见状态码: 200:一切正常 300/301:页面重定向(跳转) 404:资源不存在 403:权限不足(例如:访问a目 ...

  8. Hive中的用户自定义函数

    1.1 关于自定义函数 1)Hive 自带了一些函数,比如:max/min等,但是数量有限,自己可以通过自定义UDF来方便的扩展. 2)当Hive提供的内置函数无法满足你的业务处理需要时,此时就可以考 ...

  9. JUC---02

    目录 1.1 集合安全问题 1.1.1 ListNotSafe 1.1.2 MapNotSafe 1.1.3 SetNotSafe 1.1 集合安全问题 1.1.1 ListNotSafe 首先看一个 ...

  10. Excel提取身份证出生日期②

    问题场景 从user表中的身份信息中提取用户的出生日期: 以下方法也可适用于提取其他数据,不仅是身份证信息: 以下图中数据都为测试数据,不具备真实性! 场景一 user表中的18位身份证,提取出生日期 ...