滚动事件和加载事件

滚动事件

加载事件

滚动事件

  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. 或许是市面上最强的 Mock 工具

    背景 在开发过程中,由于后端与前端并行开发,或者前端需要等待后台开发,难以保证对接效率,同时即使用开发好的 API 对接,也有可能一个 API 不通就阻塞了整个软件的对接工作.同时对软件的敏感度也很高 ...

  2. [OpenCV实战]45 基于OpenCV实现图像哈希算法

    目前有许多算法来衡量两幅图像的相似性,本文主要介绍在工程领域最常用的图像相似性算法评价算法:图像哈希算法(img hash).图像哈希算法通过获取图像的哈希值并比较两幅图像的哈希值的汉明距离来衡量两幅 ...

  3. [C#]关于override和new在重写方法时的区别

    规则: 在"运行时"遇到虚方法时,对象会调用虚成员派生得最远的.重写的实现. 如果是用new修饰符实现的方法,它会在基类面前隐藏派生类重新声明的成员,这时候会找到使用new修饰符的 ...

  4. Linux基础操作-02

    Linux操作 Linux操作权限 显示详细信息之后,文件地权限显示 drwxrwxrwx "-" 表示常规文件 d 目录文件 b 块特殊设备 c 字符特殊设备文件 p 管道设备文 ...

  5. STL容器vector

    一.什么是Vector        向量(Vector)是一个封装了动态大小数组的顺序容器(Sequence Container).跟任意其它类型容器一样,它能够存放各种类型的对象.可以简单的认为, ...

  6. vue/cli子组件style中如何使用全局图片路径

  7. c++代码实现中时间复杂度的不断优化

    先来介绍一下时间复杂度: 同一问题可用不同算法解决,而一个算法的质量优劣将影响到算法乃至程序的效率.算法分析的目的在于选择合适算法和改进算法. 计算机科学中,算法的时间复杂度是一个函数,它定量描述了该 ...

  8. 图解B树及C#实现（3）数据的删除

    目录 前言 从叶子节点删除数据 从非叶子节点删除数据 提前扩充只有 t-1 的 Item 的节点:维持 B树 平衡的核心算法 从左兄弟节点借用 Item 从右兄弟节点借用 Item 与左兄弟节点或者右 ...

  9. Python 内置界面开发框架 Tkinter入门篇 丙(文末有福利彩蛋，今天可是元宵节)

    以下内容为本人的学习笔记,如需要转载,请声明原文链接微信公众号「ENG八戒」https://mp.weixin.qq.com/s/B1hH5Qzd2RkAiiUId1tLWw 本文大概 2874 个字 ...

  10. maven项目构建报错：Could not find artifact com.xxx.cloud:xxx-cloud:pom:1.0-SNAPSHOT and 'parent.relativePath' points at wrong local POM

    maven多模块项目打包的时候报错如下: [ERROR] [ERROR] Some problems were encountered while processing the POMs: [FATA ...