滚动事件和加载事件

滚动事件

加载事件

滚动事件

  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. SQLMap入门——获取数据库中的表名

    查询完数据库后,查询指定数据库中所有的表名 python sqlmap.py -u http://localhost/sqli-labs-master/Less-1/?id=1 -D xssplatf ...

  2. week_5

    Andrew Ng机器学习笔记---by Orangestar Week_5 重点:反向传播算法,backpropagation 1. Cost Function神经元的代价函数 回顾定义:(上节回顾 ...

  3. DTMF2num拨号音识别

    说明 很多出题人可能会把手机或者其他设备打电话的拨号音作为一个题目技能中的考察点. 什么是DTMF? 双音多频的拨号键盘是4×4的矩阵,每一行代表一个低频,每一列代表一个高频.每按一个键就发送一个高频 ...

  4. 多项式 I：拉格朗日插值与快速傅里叶变换

    1. 复数和单位根 前置知识:弧度制,三角函数. 1.1 复数的引入 跳出实数域 \(\mathbb R\),我们定义 \(i ^ 2 = -1\),即 \(i = \sqrt {-1}\),并在此基 ...

  5. Java连接Zookeeper以及书写简单增删改查的方法

    Java连接Zookeeper以及书写简单增删改查的方法   摘要:本笔记主要记录了使用IDEA创建一个Maven项目并使用Maven配置文件下载Zookeeper连接驱动,连接云服务器的Zookee ...

  6. Java学习笔记：2021年12月31日下午-2022年1月1日上午

    Java学习笔记:2021年12月31日下午-2022年1月1日上午 摘要:主要记录了计算机的电气构成,学习Linux系统的原因以及关于Linux以及相关操作的基础知识. 目录 Java学习笔记:20 ...

  7. 抽奖动画 - 播放svga动画

    svga动画 本文介绍的动画不是css,js动画,是使用插件播放svga文件. 1.需求 UI同学在做一个春节活动,活动中需要有个开场动画,原本想的简单,不涉及接口调用逻辑,就直接用做一个gif图片由 ...

  8. 全志V3S 调试串口更改或关闭

    有时项目外设比较多,很容易造成串口不够用的情况. 最近就遇到了,新增加一个GPS模块串口的,串口现在外部只有原来的调试串口可以用,所以 尝试将调试口更改为普通串口. 经过网上看大神们的文章和自己摸索, ...

  9. STM32 的学习方法

    前言 学习知识要掌握有效的学习方法,学习技术也是一样,本篇分享关于我学习 STM32 后总结的学习方法. 推荐的学习方法 系统学习 在网上购买一款开发板,使用开发板+开发板配套视频教程+开发板配套源码 ...

  10. 【学习笔记】QT从入门到实战完整版（按钮和信号槽）（1）

    介绍说明 学习 QT 的目的只是为了可以实现跨平台的具有GUI 的程序,以前用的 MFC,但是无法应用在嵌入式平台.后来在全志的 Tina 系统中有看到 QT ,因此特地去了解了QT,挺有意思的,UI ...