• JS8day（滚动事件(scroll家族),offset家族，client家族，轮播图案例（待做））

    文章目录

    滚动事件

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

    • 为什么要学？
      很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部
    • 事件名：scroll
    • 监听整个页面滚动：
      给 window 或 document 添加 scroll 事件
      监听某个元素的内部滚动直接给某个元素加即可
          window.addEventListener('scroll', function () {
          console.log('scroll')
      })

    • 1
    • 2
    • 3

    加载事件

    方法1

    加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

    • 为什么要学？
      有些时候需要等页面资源全部处理完了做一些事情
      老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
    • 事件名：load
    • 监听页面所有资源加载完毕：
      给 window 添加 load 事件
          window.addEventListener('load', function () {
          console.log('load')
      })

    • 1
    • 2
    • 3
    • 注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

    方法2

    • 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载。
    • 事件名：DOMContentLoaded
    • 监听页面DOM加载完毕：
      给 document 添加 DOMContentLoaded 事件
            window.addEventListener('DOMContentLoaded', function () {
            console.log('DOMContentLoaded')
        })

    • 1
    • 2
    • 3

    scroll家族

    • 获取宽高：
      获取元素的内容总宽高（不包含滚动条）返回值不带单位
      scrollWidth和scrollHeight
    • 获取位置:
      获取元素内容往左、往上滚出去看不到的距离
      scrollLeft和scrollTop
      这两个属性是 可以修改的
      请添加图片描述
         div.addEventListener('scroll', function () {
         console.log(this.scrollTop)
     })

    • 1
    • 2
    • 3

    在这里插入图片描述

    1. scrollWidth和scrollHeight是得到元素什么的宽高？
      内容宽高，不包含滚动条
    2. 被卷去的头部或者左侧用那个属性？是否可以读取和修改？
      scrollTop / scrollLeft
      可以读取，也可以修改（赋值）
    3. 检测页面滚动的头部距离（被卷去的头部）用那个属性？
      document.documentElement.scrollTop

    页面滚动显示返回顶部按钮(案例)

    在这里插入图片描述
    部分代码：

    <body>
    <div class="content"></div>
    <div class="backtop">
        <img src="./images/close2.png" alt="">
        <a href="javascript:;"></a>
    </div>
    <script>
        let backtop = document.querySelector('.backtop')
        window.addEventListener('scroll', function () {  //页面滚动检测
            let num = document.documentElement.scrollTop
            console.log(num)
            if (num >= 500) {
                backtop.style.display = 'block';
            }
            else {
                backtop.style.display = 'none';

            }
        })
        //不要写在里面，效率低（滚动依次监听一次）
        backtop.children[1].addEventListener('click', function () {
            document.documentElement.scrollTop = 0
        })

    </script>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    offset家族

    在这里插入图片描述

    1. 获取宽高：
      获取元素的自身宽高、包含元素自身设置的宽高、padding、border
      offsetWidth和offsetHeight
    2. 获取位置：
      获取元素距离自己定位父级元素的左、上距离
      offsetLeft和offsetTop 注意是只读属性（非要给值就用margin-top,margin-left或者定位中的top和left）
      在这里插入图片描述
      1. offsetWidth和offsetHeight是得到元素什么的宽高？
      内容 + padding + border
      2. offsetTop和offsetLeft 得到位置以谁为准？
      (1)带有定位的父级
      (2)如果都没有则以文档左上角 为准

    电梯导航案例部分代码：

         // 1. 获元取素  
     let items = document.querySelectorAll('.item')
     // 内容的盒子获取
     let neirongs = document.querySelectorAll('.neirong')
     // 2. 左侧aside 模块 点击谁，谁高亮
     for (let i = 0; i < items.length; i++) {
         items[i].addEventListener('click', function () {
             // 找到上一个active 移除类
             document.querySelector('.aside .active').classList.remove('active')
             // 点击谁谁添加类
             this.classList.toggle('active')
             // 3. 右侧内容跟随走动  让页面滚动到对应的offsetTop值位置
             // console.log(neirongs[i].offsetTop) 不用给单位
             document.documentElement.scrollTop = neirongs[i].offsetTop
         })
     }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    client家族

    在这里插入图片描述

    浏览器背景颜色改变案例部分代码

            window.addEventListener('resize', function () {   //resize 监听浏览器可是窗口变化
            let w = document.documentElement.clientWidth
            console.log(w)
            if (w >= 1920) {    //浏览器可视窗口clientWidth发生变化则背景颜色改变
                document.body.style.backgroundColor = 'blue'
            }
            else if (w > 540) {
                document.body.style.backgroundColor = 'hotpink'

            }
            else {
                document.body.style.backgroundColor = 'red'

            }
        })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    总结

    在这里插入图片描述

            // scrollWidth scrollHeight  内容 宽高 （了解）
        let div = document.querySelector('div')
        console.log(div.scrollWidth)  // 150 不带单位
        console.log(div.scrollHeight)  // 336 不带单位
        console.log('----------------------------')
        // offset 盒子元素的大小 = 盒子本身的宽度和高度 + padding + border
        console.log(div.offsetWidth)  // 150 不带单位
        console.log(div.offsetHeight)  // 150 不带单位
        // console.log(div.offsetTop)  //
        // console.log(div.offsetLeft)
        //  client 当前可视区域  不包含滚动条  边框等等
        console.log('----------------------------')
        console.log(div.clientWidth)
        console.log(div.clientHeight)
        console.log(div.clientTop)  // 边框的宽度  了解
        console.log(div.clientLeft)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
  • 相关阅读:
    什么是联盟营销以及如何使用它在网上赚更多的钱
    零编程数据可视化展示：十个简易案例！
    互斥mutex与spinlock的对比
    Qt5.15：MinGW64位编译Oracle 19c数据库驱动及代码测试 - 安装时没有选Sources处理办法
    日常学习记录随笔-redis实战
    15.ORACLE11g的归档方式和日志文件的相关操作
    数字化营销：企业营收N倍增长的秘诀
    能量、功率、能量谱密度、功率谱密度、自相关函数_Matlab
    2022值得一试的顶级 React 组件库
    PAT A1016 Phone Bills
  • 原文地址：https://blog.csdn.net/qq_44976531/article/details/125506403