滚动事件和加载事件

滚动事件

加载事件

滚动事件

什么是滚动事件？

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> ...

随机推荐

DID 2022-12-02
DID第二节课最低工资对就业率影响(DID) 宾夕法尼亚VS新泽西的快餐店,用边界的好处:在用最低工资法之前,两地工资情况差不多,DID需要两期,92年11月实施,之前之后做电话访问. 数据越全的估 ...
react项目中如何出现config文件夹
答案:运行 npm run eject 即可出现config文件夹原因: 在package.json中:只有三个依赖,分别是react,react-dom,react-scripts,依赖为什么 ...
[编程基础] Python随机数生成模块总结
Python随机数生成模块教程演示如何在Python中生成伪随机数. 1 介绍 1.1 随机数字生成器随机数生成器(RNG)生成一组在外观上不显示任何可区分模式的值.随机数生成器分为两类:硬件随机数 ...
BZOJ4919 大根堆（树形dp+线段树合并）
用 multiset 启发式合并贪心维护 LIS 的做法就不多说了,网上题解一大堆,着重讲一下线段树合并维护 \(dp\). \(O(n^2)\) 的 \(dp\) 非常显然.离散化后,设 \(dp[ ...
BalticOI 2004 Sequence 题解
题目链接在这里~ 对于序列\(\{a\}\),把每一个\(a_i\)减去一个\(i\),得到\(\{a'\}\)序列\(\{b\}\)同理. 因为\(b_1<b_2<...<b_n\ ...
JAVA中使用最广泛的本地缓存？Ehcache的自信从何而来3 —— 本地缓存变身分布式集群缓存，打破本地缓存天花板
大家好,又见面了. 本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面.如果感兴趣,欢迎关注以获取后续更新. 上一篇文章中,我们知晓了如何在项目中通 ...
《Effective C++》资源管理章节
Item 13:以对象管理资源关键的两个想法(这种方式其实在很多地方都可以看出影子,比如managing pool的模型): 1.获得资源后立刻放入管理对象(managing object):以对象 ...
P3934 [Ynoi2016] 炸脖龙 I
题面给一个长为 \(n\) 的序列,\(m\) 次操作,每次操作: 1.区间 \([l,r]\) 加 \(x\) 2.对于区间 \([l,r]\),查询: \[a[l]^{a[l+1]^{a[l+2 ...
图文并茂的学习笔记--微信小程序自定义tabbar
我发现自带的那个tabbar不可以修改样式,没得搞啊,这不行,要改首先,我们看文档,地址在下面 https://developers.weixin.qq.com/miniprogram/dev/fr ...
npm 中设置环境NODE_ENV变量，判断失败打印process.env.NODE_ENV确实是"development",但是判断process.env.NODE_ENV === "development" 是false
通过package.json 的scripts脚本修改NODE_ENV的值来区分开发环境和生产环境. "scripts": { "build": " ...

DOM05~

滚动事件和加载事件

滚动事件

加载事件

元素大小和位置

scroll 家族

offset 家族

client 家族

三大家族获取宽高对比 demo

DOM05~的更多相关文章

随机推荐

热门专题