滚动事件和加载事件

滚动事件

加载事件

滚动事件

  1. 什么是滚动事件？

    1.1 当页面进行滚动时触发的事件

    1.2 作用：网页需要检测用户把页面滚动到某个区域后做一些处理

    1.3 事件名：scroll

  2. 监听整个页面滚动

    2.1 给 window 或 document 添加 scroll 事件

  3. 监听某个元素的内部滚动直接给某个元素加即可

  4. demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height:3000px;
        }
        div{
            width:100%;
            height:2000px;
            background-color: pink;
            overflow: auto;
        }
    </style>
​
</head>
<body>
    <div></div>
​
    <script>
        // 页面滚动 事件监听
        // 监听 某个元素
        let div = document.querySelector('div')
        div.addEventListener('scroll', function() {
            console.log(111);
        })
        // 监听页面
        window.addEventListener('scroll', function() {
            console.log(111);
        })
    </script>
</body>
</html>

加载事件

  1. 什么是加载事件？

    1.1 加载外部资源（如图片、外联CSS、JavaScript）加载完毕时触发的事件

    1.2 作用：

    • 有时候需要页面资源全部处理完了做一些事情

    • 老代码喜欢把 script 卸载 head 中，这时候直接找 dom 元素找不到

    1.3 事件名：load(2 --> 3) / 事件名：DOMContentLoaded(4 --> 5)

  2. 监听页面所有资源加载完毕

    • 给 window 添加 load 事件

  3. 监听某个元素的内部滚动直接给某个元素加即可

  4. 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

  5. 监听页面 DOM 加载完毕

    • 给 document 添加 DOMContentLoaded 事件

  6. demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 输出结果为 null
        // let div = document.querySelector('div')
        // console.log(div);
​
        // 为 页面 添加 load事件监听
        window.addEventListener('load', function() {
            let div = document.querySelector('div')
            console.log(div);
        })
    </script>
​
</head>
<body>
    <div>
        我是一个盒子
    </div>
</body>
</html>

元素大小和位置

scroll 家族

offset 家族

client 家族

网页特效

scroll 家族

  1. 获取宽高

    • 元素 内容 高度/宽度的一种度量

    • scrollWidth scrollHeight

    • 它包含含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。它还可以包括伪元素的宽度，例如 ：：before或 ：：after。

    • 只读属性

  2. 获取位置

    • 可以获取或设置一个元素的内容水平/垂直滚动的像素数

    • scrollLeft scrollTop

    • 这两个属性时可以修改的

  3. demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height:3000px;
            background-color: pink;
        }
        button{
            position: fixed;
            top: 400px;
            right:18px;
            display:none;
        }
        .active{
            display:block;
        }
    </style>
​
</head>
<body>
    <div></div>
    <button>返回顶部</button>
​
    <script>
        // 获取元素
        let btn = document.querySelector('button')
        // 页面滚动事件
        window.addEventListener('scroll',function() {
            if (document.documentElement.scrollTop >= 400) {
                btn.classList.add('active')
            }else{btn.classList.remove('active')}
        })
​
        // 点击链接 返回顶部
        btn.addEventListener('click', function() {
            document.documentElement.scrollTop = 0
        })
    </script>
</body>
</html>

offset 家族

  1. 获取宽高

    • 返回一个 元素 的布局高度/宽度

    • offsetWidth offsetHeight

    • 包含元素的边框 (border)、水平线上的内边距 (padding)、竖直/水平方向滚动条 (scrollbar)（如果存在的话）、以及 CSS 设置的高度/宽度 (width) 的值。

    • 只读属性

  2. 获取位置

    • 返回当前元素左上角相对于 offsetParent 元素的左边界偏移的像素值。

    • 返回当前元素相对于其 offsetParent 元素的顶部内边距的像素值。

    • offsetLeft offsetTop

    • 只读属性

  3. demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        header{
            width:100%;
            height:48px;
            background-color: pink;
            margin-top: -48px;
            position: fixed;
        }
        section{
            width:80%;
            height:2000px;
            background-color: blue;
            margin:auto;
        }
        div{
            position: absolute;
            top:400px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <header>
        我是顶部导航栏
    </header>
    <section>
        <div>看到显示导航</div>
    </section>
​
    <script>
        // 获取元素
        let header = document.querySelector('header')
        let div = document.querySelector('div')
        // 设置 滚动 事件监听
        window.addEventListener('scroll', function() {
            if (document.documentElement.scrollTop >= div.offsetTop){
                console.log(document.documentElement.scrollTop >= div.offsetTop);
                header.style.marginTop = '0px'
            }else{header.style.marginTop = '-48px'}
        })
    </script>
</body>
</html>

client 家族

  1. 获取宽高

    • 表示元素的内部高度/宽度，以像素计

    • clientWidth clientHeight

    • 该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。

    • 只读属性

  2. 获取位置

    • 一个元素顶部边框/左边框的宽度（以像素表示）

    • clientTop clientLeft

    • 不包括顶部外边距或内边距

    • 只读属性

  3. 窗口尺寸改变时触发事件

    • resize

    • window.addEventListener('resize', function(){//执行代码})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        window.addEventListener('resize', function() {
            console.log(111);
        })
    </script>
</body>
</html>

三大家族获取宽高对比 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        div{
            width:150px;
            height:150px;
            background-color: pink;
            overflow: auto;
        }
    </style>
​
</head>
<body>
    <div>
        这是一个盒子<br>这是一个盒子<br>这是一个盒子<br>
        这是一个盒子<br>这是一个盒子<br>这是一个盒子<br>
        这是一个盒子<br>这是一个盒子<br>这是一个盒子<br>
        这是一个盒子<br>这是一个盒子<br>这是一个盒子<br>
    </div>
​
    <script>
        let div = document.querySelector('div')
        // scrollWidth scrollHeight
        console.log('scrollWidth scrollHeight');
        console.log(div.scrollWidth);
        console.log(div.scrollHeight);
        // offsetWidth offsetHeight
        console.log('offsetWidth offsetHeight');
        console.log(div.offsetWidth);
        console.log(div.offsetHeight);
        // clientWidth clientHeight
        console.log('clientWidth clientHeight');
        console.log(div.clientWidth);
        console.log(div.clientHeight);
    </script>
</body>
</html>

DOM05~的更多相关文章

  1. eCharts_基于eCharts开发的一个多图表页面

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. python -m pip install --upgrade pip报No module named pip解决方法

    解决方法: 1. python -m ensurepip 2. python -m pip install --upgrade pip 注意:添加pip环境变量 在python安装目录下搜索pip3或 ...

  2. 定制.NET 6.0的Middleware中间件

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 在本文中,我们将学习中间件,以及如何使用它进一步定制应用程序.我们将快速学习中间件 ...

  3. 时隔3个月，Uber 再遭数据泄露...

    在今年9月,Uber 就发生过一起数据泄露事件,尽管黑客并无意发动大规模攻击或以此来获取巨额利益,但其成功获取对 Uber 所有敏感服务的完全管理员访问权限仍令人后怕.而在上周,名为"Ube ...

  4. avue属性详解和使用介绍

    官方文档:https://www.avuejs.com/form/form.html <template> <!-- 基础组件 --> <basic-container& ...

  5. 利用Git同步思源笔记

    旧文章从语雀迁移过来,原日期为2022-10-22 思源笔记是一款优秀的本地优先的双链大纲笔记软件,拥有强大的笔记编辑功能且都是免费,唯一付费的就是云同步等一些服务了.但如果暂时还用不着云同步的,我们 ...

  6. SSM基础学习笔记

    SSM框架: 1.界面层---servlet类---SpringMVC 2.业务逻辑层---service类---Spring 3.数据访问层(持久层)---dao类---MyBatis 一.MyBa ...

  7. [深度学习] ubuntu18.04配置深度学习环境笔记

    最近装过很多ubuntu18.04系统的nvidia驱动,cuda10.2,cudnn7.6.5,发现每次都会出现一些小问题.总结了具体步骤,做个记录.主要分为三个步骤:驱动安装,cuda安装,cud ...

  8. [深度学习] Python人脸识别库Deepface使用教程

    deepface是一个Python轻量级人脸识别和人脸属性分析(年龄.性别.情感和种族)框架,提供非常简单的接口就可以实现各种人脸识别算法的应用.deepface官方仓库为deepface.deepf ...

  9. 如何用 30s 给面试官讲清楚什么是 Session-Cookie 认证

    引言 由于 HTTP 协议是无状态的,完成操作关闭浏览器后,客户端和服务端的连接就断开了,所以我们必须要有一种机制来保证客户端和服务端之间会话的连续性,也称为认证,最常见的应用场景就是保持用户的登录态 ...

  10. [C++]C++11：Function与Bind

    std::function 它是函数.函数对象.函数指针.和成员函数的包装器,可以容纳任何类型的函数对象,函数指针,引用函数,成员函数的指针. 以统一的方式处理函数.函数对象.函数指针.和成员函数. ...