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. LinuX操作系统基础------>了解文件结构和相关的文件操作

    了解LinuX文件系统 熟悉LinuX的文件结构 熟悉LinuX的基本操作指令 利用所学指令进行指令组合操作 什么是文件?什么是目录? 文件:一般是一个独立的东西,可以通过某些工具将其打开 目录:可以 ...

  2. 谈谈MySql索引

    刚刚学习完丁奇老师<MySql 实战 45 讲>专栏中的索引部分,图文并茂的风格解开了我之前的许多疑惑,并且学习到许多新的东西,在此做个笔记,方便后续复习.由于 MySql 中存在多种存储 ...

  3. leetcode刷题笔记-3. 无重复字符的最长子串（java实现）

    题目描述 给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1: 输入: "abcabcbb"输出: 3 解释: 因为无重复字符的最长子串是 "ab ...

  4. 图论算法（四）Dijkstra算法

    最短路算法(三)Dijkstra算法 PS:因为这两天忙着写GTMD segment_tree,所以博客可能是seg+图论混搭着来,另外segment_tree的基本知识就懒得整理了-- Part 1 ...

  5. Istio Routing 实践掌握virtualservice/gateway/destinationrule/AB版本发布/金丝雀发布

    原文 在学习像 Istio 这样的新技术时,看一下示例应用程序总是一个好主意. Istio repo 有一些示例应用程序,但它们似乎有各种不足. 文档中的 BookInfo 是一个很好的示例. 但是, ...

  6. SpringMVC接受表单数据

    @ 目录 pojo addProduct.jsp ProductController showProduct.jsp 测试结果 pojo 新建实体类Product package pojo; publ ...

  7. centos7.8 安装部署 k8s 集群

    centos7.8 安装部署 k8s 集群 目录 centos7.8 安装部署 k8s 集群 环境说明 Docker 安装 k8s 安装准备工作 Master 节点安装 k8s 版本查看 安装 kub ...

  8. Centos7 KVM启用嵌套虚拟化

    [root@kvm-hypervisor ~]# cat /etc/modprobe.d/kvm-nested.conf options kvm-intel nested= options kvm-i ...

  9. python自动化测试中的数据驱动unittest+ddt

    ddt是一个unittest的插件,用来实现uniitest的数据驱动 本文以python自动化测试中的数据驱动为原则,记录学习ddt的过程 一.数据的传递规则

  10. Java数据结构——顺序表

    一个线性表是由n(n≥0)个数据元素所构成的有限序列. 线性表逻辑地表示为:(a0,a1,…,an-1).其中,n为线性表的长度,n=0时为空表.i为ai在线性表中的位序号. 存储结构:1.顺序存储, ...