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. SpringMVC 集成 JWT验证方式

    JWT官网: https://jwt.io/ 这里以java的ssm框架为例,集成jwt. 1.pom.xml 导入jwt的包 <!-- jwt --> <dependency> ...

  2. HourglassNet

  3. C++中简单程序出现Segmentation fault (core dumped)段错误

    段错误就是指访问的内存超出了系统所给这个程序的内存空间.一般是随意使用野指针或者数组.数组越界. ------两种简单解决方法:1.利用GDB调试,定位出错位置.(具体可查找博客详细学习)2.在可能出 ...

  4. C#LeetCode刷题之#326-3的幂（Power of Three）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3867 访问. 给定一个整数,写一个函数来判断它是否是 3 的幂次 ...

  5. myBatis源码解析-反射篇（4）

    前沿 前文分析了mybatis的日志包,缓存包,数据源包.源码实在有点难顶,在分析反射包时,花费了较多时间.废话不多说,开始源码之路. 反射包feflection在mybatis路径如下: 源码解析 ...

  6. python设计模式之责任链模式

    python设计模式之责任链模式 开发一个应用时,多数时候我们都能预先知道哪个方法能处理某个特定请求.然而,情况并非总是如此.例如,想想任意一种广播计算机网络,例如最早的以太网实现.在广播计算机网络中 ...

  7. 图论算法（三） 最短路SPFA算法

    我可能要退役了…… 退役之前,写一篇和我一样悲惨的算法:SPFA 最短路算法(二)SPFA算法 Part 1:SPFA算法是什么 其实呢,SPFA算法只是在天朝大陆OIers的称呼,它的正统名字叫做: ...

  8. 了解JS压缩图片，这一篇就够了

    前言 公司的移动端业务需要在用户上传图片是由前端压缩图片大小,再上传到服务器,这样可以减少移动端上行流量,减少用户上传等待时长,优化用户体验. 插播一下,本文案例已整理成插件,已上传npm ,可通过 ...

  9. 一键打开 jupyter

    一般打开jupyter notebook 是以下步骤: 打开cmd-----输入:jupyter notebook-----按Enter键 为了省事,写了一个.py文件实现上述步骤,代码如下: imp ...

  10. Linux非交互方式设置密码

    echo "123" | passwd -stdin lamp echo testuser:password|chpasswd 参考:Linux通过Shell脚本命令修改密码不需要 ...