Web APIs---DOM- 网页特效篇

滚动事件和加载事件

滚动事件

​ 应用场景：比如网页滚动到一定距离后固定导航栏，返回顶部等

​ 使用：给 window 或 document 添加 scroll 事件，如果想要监听某个元素的内部滚动直接给某个元素加即可

// 页面级别滚动   监听整个页面滚动   事件名：scroll
        window.addEventListener('scroll',function () {
            //这个代码可以获取到当前页面的滚动距离
            console.log(document.documentElement.scrollTop);
        })

加载事件

​ load

​ load事件会在标签生成后，同时会等待标签内的外部资源（外部css js 图片 视频）也加载完成才会触发load事件，写代码的时候，我们 会把所有的代码都写在 window load事件内来确保我们所需要的外部资源全部都可以使用

​ DOMContentLoaded

​ 页面的标签加载完毕，事件就触发，不需要等待标签的内容都加载完成

元素大小和位置

scroll家族

​ dom.scrollTop / scrollLeft-：获取元素垂直 / 水平滚动的距离

​ dom.scrollWidth / scrollHeight：获取整个滚动区间内不包含滚动条的宽 / 高度，例如：整个元素的高度是300，但是内部数字滚动的 高度是2000，那么2000就是scrollHeight，scrollWidth也是同理

offset家族

​ dom.offsetLeft / offsetTop：获取已经定位的父元素的左边水平 / 上面垂直距离，若父级没定位，则获取自身的位置

​

​ dom.offsetWidth / offsetHeight：获取元素自身的宽 / 高，包含滚动条区域包含元素自身设置的宽高、padding、border

client家族

​ dom.clientLeft / clientTop：获取左侧 / 上面滚动的距离

​ dom.clientWidth / clientTop：获取可视区域的宽 / 高度（不包含滚动条）

综合案例

scroll事件---页面滚动显示&点击返回顶部

        // 滚动到700显示 否则就隐藏  同时点击返回顶部
        const a = document.querySelector('a')

        // 绑定滚动事件
        window.addEventListener('scroll', function () {
            //  设置滚动长度 700就显示 不到则隐藏
            if (document.documentElement.scrollTop >= 700) {
                //  显示
                a.style.display = 'block'
            } else {
                // 隐藏
                a.style.display = 'none'
            }
        })

        // 3.点击图片缓慢返回最顶部
        a.addEventListener('click', function () {
            // 慢慢的来设置 scrollTop 减少为0 即可
            let timeId = setInterval(function (prams) {
                document.documentElement.scrollTop -= 30
                if (document.documentElement.scrollTop === 0) {
                    // 清除定时器
                    clearInterval(timeId)
                }
            }, 10)
        })

焦点轮播图

      // 获取小图片的li标签
      const lis = document.querySelectorAll('.indicator li');
      // 获取大图对应的li标签
      const slidesLis = document.querySelectorAll('.slides li');
      // 遍历来绑定点击事件
      for (let index = 0; index < lis.length; index++) {
        lis[index].addEventListener('click', function (event) {
          // 把大图的 active 类 移除掉
          document
            .querySelector('.slides li.active')
            .classList.remove('active');
          // // 把小图的 active  移除掉
          document
            .querySelector('.indicator li.active')
            .classList.remove('active');

          // 给当前点击的li标签对应下标的 小图 添加 active类
          this.classList.add('active');
          // console.log(this);// 希望 this是li标签
          // 给当前点击的li标签对应下标的 大图 添加 active类
          slidesLis[index].classList.add('active');

          // 设置标题文字
          document.querySelector('h3').innerText = `第${
            index + 1
          }张图的描述信息`;
        });
      }