滚动事件和加载事件

滚动事件

加载事件

滚动事件

什么是滚动事件？

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

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

1.3 事件名：scroll
监听整个页面滚动

2.1 给 window 或 document 添加 scroll 事件
监听某个元素的内部滚动直接给某个元素加即可
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 加载外部资源（如图片、外联CSS、JavaScript）加载完毕时触发的事件

1.2 作用：
- 有时候需要页面资源全部处理完了做一些事情
- 老代码喜欢把 script 卸载 head 中，这时候直接找 dom 元素找不到
1.3 事件名：load(2 --> 3) / 事件名：DOMContentLoaded(4 --> 5)
监听页面所有资源加载完毕
- 给 window 添加 load 事件
监听某个元素的内部滚动直接给某个元素加即可
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
监听页面 DOM 加载完毕
- 给 document 添加 DOMContentLoaded 事件
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 家族

获取宽高
- 元素内容高度/宽度的一种度量
- scrollWidth scrollHeight
- 它包含含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。它还可以包括伪元素的宽度，例如：：before或：：after。
- 只读属性
获取位置
- 可以获取或设置一个元素的内容水平/垂直滚动的像素数
- scrollLeft scrollTop
- 这两个属性时可以修改的
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 家族

获取宽高
- 返回一个元素的布局高度/宽度
- offsetWidth offsetHeight
- 包含元素的边框 (border)、水平线上的内边距 (padding)、竖直/水平方向滚动条 (scrollbar)（如果存在的话）、以及 CSS 设置的高度/宽度 (width) 的值。
- 只读属性
获取位置
- 返回当前元素左上角相对于 offsetParent 元素的左边界偏移的像素值。
- 返回当前元素相对于其 offsetParent 元素的顶部内边距的像素值。
- offsetLeft offsetTop
- 只读属性
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 家族

获取宽高
- 表示元素的内部高度/宽度，以像素计
- clientWidth clientHeight
- 该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。
- 只读属性
获取位置
- 一个元素顶部边框/左边框的宽度（以像素表示）
- clientTop clientLeft
- 不包括顶部外边距或内边距
- 只读属性
窗口尺寸改变时触发事件
- 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~的更多相关文章

eCharts_基于eCharts开发的一个多图表页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

微软跨平台maui开发chatgpt客户端
image 什么是maui .NET 多平台应用 UI (.NET MAUI) 是一个跨平台框架,用于使用 C# 和 XAML 创建本机移动(ios,andriod)和桌面(windows,mac)应 ...
javascript计算器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
vite+ts+vue3+router4+Pinia+ElmPlus+axios+mock项目基本配置
1.vite+TS+Vue3 npm create vite Project name:... yourProjectName Select a framework:>>Vue Selec ...
mac下 idea 注释快捷键冲突
你好,我是悦创. 博客首发:https://bornforthis.cn/posts/28.html 打开偏好设置,将冲突的快捷键关掉,就可以解决 idea 使用注释快捷键,会打开 help 页面的问 ...
python之路35 MySQL 3 字段的约束条件外键关系
字段约束条件无符号.零填充 unsigned id int unsigned zerofill id int(5) zerofill 非空 create table t1( id int, name ...
test20230111考试总结 -2023寒图论专题
前言赛时得分情况: A B C D E F G H I \(\texttt{Total}\) \(\texttt{Rank}\) \(100\) \(100\) \(10\) \(58\) \(54 ...
Miller-Rabin 与 Pollard-Rho 算法学习笔记
前言 Miller-Rabin 算法用于判断一个数 \(p\) 是否是质数,若选定 \(w\) 个数进行判断,那么正确率约是 \(1-\frac{1}{4^w}\) ,时间复杂度为 \(O(\log ...
音频音量调整中的ramp up & down
在日常生活中不管是打电话还是听音乐,都会遇到音量不合适而去调整音量的情况.如果音量调整软件处理不好,就会听到pop noise.产生pop noise的原因是音量直接从当前值骤变到目标值,而不是缓慢的 ...
AtCoder Beginner Contest 285 解题报告
AtCoder Beginner Contest 285 解题报告 \(\text{DaiRuiChen007}\) Contest Link A. Edge Checker 2 假设 \(a\ge ...
洛谷P1259 黑白棋子的移动题解
本蒟蒻这题用的打表做法,其实也可以理解为是一种递推. 先来观察一下样例: 当n为7时,输出共有14行,易得输出行数为2n. ooooooo*******-- oooooo--******o* oooo ...

DOM05~

滚动事件和加载事件

滚动事件

加载事件

元素大小和位置

scroll 家族

offset 家族

client 家族

三大家族获取宽高对比 demo

DOM05~的更多相关文章

随机推荐

热门专题