滚动事件和加载事件三大家族

野原新之助real

于 2023-01-08 15:02:07 发布

阅读量82

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_56769908/article/details/128596134

版权

文章介绍了网页滚动时触发的scroll事件，用于实现如固定导航栏或返回顶部的功能。同时，讲解了load事件在等待页面资源完全加载后的应用。文中通过示例代码展示了如何使用scrollWidth,scrollTop等属性检测滚动距离，以及offsetWidth,offsetTop等属性确定元素的位置，以便动态调整页面元素的显示。此外，还提及了client家族属性在获取元素可视区域宽度中的作用。

摘要由CSDN通过智能技术生成

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

为什么要学 很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏。比如返回顶部

事件名 scroll

监听整个页面的滚动：

 window.addEventListener('scroll',function(){
            
        })

window或document添加scroll事件

加载事件

加载外部资源，加载完毕触发的事件

有些时候需要等页面资源全部处理完了做一些事情

老代码喜欢把script写在head里面这时候直接找dom元素找不到

事件名 load

监听页面所有资源加载完毕

给window添加load事件

元素的大小和位置

2.1 scroll家族

要页面滚动滚动多少距离比如100px就让某些元素显示隐藏

用scroll来检测页面滚动距离

获取宽高

获取元素内容的宽和高（不包含滚动条）返回值不带单位

srcollWidth srcollHeight

获取位置

获取元素内容往左往上滚上去看不到的距离

scrollLeft scrollTop

document.documentElement.scrollTop

这个属性是可以更改的给值

<script>
     //滚动的事出现
    
     let backtop=document.querySelector('.backtop')
     let a =document.querySelector('a')
     window.addEventListener('scroll',function(){ 
       if(document.documentElement.scrollTop>=500){
        backtop.style.display='block'
       }
       backtop.children[1].addEventListener('click',function(){
        document.documentElement.scrollTop=0
        backtop.style.display='none'
       })
       backtop.children[0].addEventListener('click',function(){
        backtop.style.display='none'
       })
     })
    </script>

滚动案例

2.2 offset家族

上面代码中的500不应该写死，让js自动获取页面中的位置

获得宽高

获得元素的自身宽高包括元素自身设置的宽高 padding border

offsetWidth offsetHeight

获取位置

获取元素距离定位父级元素的左，上距离

offsetLeft 和 offsetTop 只读属性

 window.addEventListener('scroll',function(){
        if(document.documentElement.scrollTop>=sk.offsetTop)
        head.style.top='0px'
        else
        head.style.top='-80px'
     })

client家族

获取宽高

获取元素可见部分的宽度（不包含边框滚动条等）可视区域

会在窗口改动的时候触发事件：

->resize

检测屏幕宽度

console.log( document.documentElement.clientWidth)