js 自定义页面滚动停止方法例子
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义页面滚动结束方法</title>
<style>
html, body{
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.scrollBox {
height: 100%;
width: 100%;
overflow-y: auto;
}
.contentBox{
width: 100%;
}
.contentBox > li{
padding-top: 15px;
padding-bottom: 15px;
}
</style>
</head>
<body>
<div class="scrollBox">
<ul class="contentBox"></ul>
</div>
<script>
let contentBox = document.querySelector('.contentBox'), windowKey = ''
for (const key in window) {windowKey += `<li>${key}</li>`}
contentBox.innerHTML = windowKey
// ---------- 主要代码开始 -----------
let onScrollTimer = null // 定义一个变量，用来存放定时器
let scrollBox = document.querySelector('.scrollBox')
scrollBox.addEventListener('scroll', (e) => {
clearTimeout(this.onScrollTimer)// 页面滚动时触发，不断清除定时器, 确保只有最后一次触发scroll方法能触发定时器里的代码
this.onScrollTimer = setTimeout(() => {
// 只有最后一次scroll方法才能进这里
console.log('页面滚动结束');
}, 50)
})
</script>
</body>
</html>
网友评论