<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
padding-top: 100px;
height: 3000px;
}
div{
display: none;
margin: 100px;
overflow: scroll;
width: 200px;
height: 200px;
border: 1px soild #0000;
}
</style>
</head>
<body>
<div>
文字文字文字文字文字文字文字
文字文字文字文字文字文字文字
文字文字文字文字文字文字文字
文字文字文字文字文字文字文字
文字文字文字文字文字文字文字
文字文字文字文字文字文字文字
文字文字文字文字文字文字文字
文字文字文字文字文字文字文字
文字文字文字文字文字文字文字
文字文字文字文字文字文字文字
文字文字文字文字文字文字文字
文字文字文字文字文字文字文字
文字文字文字文字文字文字文字
文字文字文字文字文字文字文字
文字文字文字文字文字文字文字
文字文字文字文字文字文字文字
文字文字文字文字文字文字文字
文字文字文字文字文字文字文字
文字文字文字文字文字文字文字
</div>
<script>
//页面滚动事件
const div = document.querySelector('div')
window.addEventListener('scroll',function(){
//scrollTop 页面滚动的像素,被卷去多少
//获取html:document.documentElement
// document.documentElement.scrollTop 即html被卷去多少
console.log(parseInt(document.documentElement.scrollTop)) //得到数字型,不带单位
const n = document.documentElement.scrollTop
if(n >= 100){
div.style.display = 'block'
}else{
div.style.display = 'none'
}
})
</script>
</body>
</html>
10-页面滚动事件
最新推荐文章于 2023-10-10 11:26:22 发布