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. angular.js 本地数据存储LocalStorage

    定义工厂模式 factory  本地存储数据服务 app.factory('locals', ['$window', function ($window) { return { //存储单个属性 se ...

  2. Dubbo整合Springboot框架

    本文使用的是alibaba的Dubbo. Dubbo整合Springboot可以分为四步: 第一步:首先需要了解Dubbo官方给的建议,至少有三个工程: 接口工程:主要存实体bean和业务接口 服务提 ...

  3. Java—构造方法及this/super/final/static关键字

    构造方法 构建创造时用的方法,即就是对象创建时要执行的方法. //构造方法的格式: 修饰符 构造方法名(参数列表) { } 构造方法的体现: 构造方法没有返回值类型.也不需要写返回值.因为它是为构建对 ...

  4. java数组与数组异常

    一 数组的定义 1.第一种定义方法: 格式: 数据类型[] 数组名=new 数据类型[数组长度] 2.第二种定义方法: 格式: 类型[] 数组名 = new 类型[]{元素,元素,.....} 3.第 ...

  5. C#LeetCode刷题之#35-搜索插入位置（Search Insert Position）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3979 访问. 给定一个排序数组和一个目标值,在数组中找到目标值, ...

  6. NodeJs nrm 和 nvm

    nrm 和 nvm nrm (npm registry manager)是npm的镜像源管理工具 nvm (node version manager)是nodejs的版本管理工具 nrm # nrm ...

  7. 关于什么时候用，怎么用：ExecuteNonQuery()，还有其它返回值

    ExecuteScalar方法返回的类型是object类型,这个方法返回sql语句执行后的第一行第一列的值,由于不知到sql语句到底是什么样的结构(有可能是int,有可能是char等等),所以Exec ...

  8. python 07 字典 集合

    字典 key:value 键:值 映射,哈希值,关系(数组) x=['1','2'] y=['a','b'] >>print(y[x.index('1')]) a index() 函数用于 ...

  9. Mybatis_day1

    mybatis框架的引入: JDBC里面 对功能实现的进一步封装,可以按照以下方式操作 Student s = new Student(id,name); util.save(s); ORM: obj ...

  10. 你想了解的JDK 10版本更新都在这里

    「MoreThanJava」 宣扬的是 「学习,不止 CODE」,本系列 Java 基础教程是自己在结合各方面的知识之后,对 Java 基础的一个总回顾,旨在 「帮助新朋友快速高质量的学习」. 当然 ...