滚动事件和加载事件

滚动事件

加载事件

滚动事件

  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. PPT排版技巧

  2. vue 点击按钮添加一行dom节点

    如图,最近项目需求,点击添加一行dom节点,包含下拉框和input输入框 ,下面展示一下代码 <ul class="sales-menuItem-ul"> <li ...

  3. JavaScript：箭头函数：省略写法

    之所以把箭头函数拎出来,是因为它不仅仅是声明函数的一种方式,它还是函数式编程的重要根基,它使得函数的使用更加的灵活,同时,它的语法,也相对于function声明的函数更加灵活和复杂. 箭头函数的省略写 ...

  4. JavaScript：操作符：空值合并运算符(??)

    这是一个新增的运算符,它的功能是: 对于表达式1 ?? 表达式2,如果表达式1的结果是null或者undefined时,返回表达式b的结果:否则返回表达式a的结果: 它与赋值运算符结合使用,即??=, ...

  5. 4、PageHelper分页查询

    1.MyBatis的分页方式: 逻辑分页与物理分页 1.逻辑分页:使用MyBatis自带的RowBounds进行分页,是一次性查询很多数据,然后再在结果中检索分页的数据.这样做弊端是需要消耗大量的内存 ...

  6. PostgreSQL(02): PostgreSQL常用命令

    目录 PostgreSQL(01): Ubuntu20.04/22.04 PostgreSQL 安装配置记录 PostgreSQL(02): PostgreSQL常用命令 PostgreSQL 常用命 ...

  7. python实现单向循环链表与双向链表

    目录 单向循环链表 操作 实现 双向链表 操作 实现 单向循环链表 单链表的一个变形是单向循环链表,链表中最后一个节点的next域不再为None,而是指向链表的头节点. 操作 is_empty() 判 ...

  8. js获取天气插件

    SDK介绍 根据指定入参,传入三个 select 的 id值 及 回调函数,每次选项变更都会拿到对应地区最新天气数据. 必须是三个 Select 标签 有记住选项功能,避免重复相关逻辑. 1.依赖源码 ...

  9. 发布个工具，一键恢复Win8/8.1中的微软拼音长句模式（新体验模式）

    (cnBeta:http://www.cnbeta.com/articles/277936.htm) 首先贴个图,大家来一起念台词~ 念完了木有?很激情澎湃义愤填膺有木有? 这事情最早追溯到前年 8 ...

  10. 【随笔】Ubuntu18.04下virtualbox卡死的解决办法

    //得到该进程ID X pgrep Xorg //杀掉进程 kill X 然后重新登陆帐号即可