window.onload / onscroll/onresize 事件
onload当文档加载完成后执行一些操作 window.onload = function(){ console.log("页面加载完成") } onscroll当页面发生滚动时执行一些操作 window.onload = function(){ console.log(1) //当页面发生滚动时,打印1 } onresize当窗口大小发生改变时执行一些操作 window.onresize = function(){ console.log(1) //当窗口大小发生改变时,打印1 } 页面滚动条距离顶部的距离 document.documentElement.scrollTop 页面滚动条距离左边的距离 document.documentElement.scrollLeft
demo: 做一个滚动条
var obox=document.querySelector(".box1") //点击的盒子
var t;
obox.onclick=function () {
t=setInterval(function () {
var s=document.documentElement.scrollTop-=50 //设置定时器每0.01毫秒减少50
console.log(document.documentElement.scrollTop)
if(s<=0){ //减少为0时关闭计时器
clearInterval(t)
}
},10)
}
长风破浪会有时,直挂云帆济沧海