当页面进行滚动时触发的事件
为什么要学 很多网页需要检测用户把页面滚动到某个区域后做一些处理,比如固定导航栏。比如返回顶部
事件名 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)