js 判断滚动条是否停止滚动

时间:2023-03-09 20:56:17
js 判断滚动条是否停止滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js判断滚动条停止</title>
<style type="text/css">
.box {
height: 3000px;
}
</style>
<script type="text/javascript">
var topValue = 0, // 上次滚动条到顶部的距离
interval = null; // 定时器
document.onscroll = function() {
if(interval == null) {
// 未发起时,启动定时器,1秒1执行
interval = setInterval(function() {
if(document.documentElement.scrollTop == topValue) {
alert("scroll bar is stopping!");
clearInterval(interval);
interval = null;
}
}, 1000);
}
topValue = document.documentElement.scrollTop;
}
</script>
</head>
<div class="box"></div>
<body>
</body>
</html>

这个需求是我在写一个固钉的时候遇到的问题,当滚动条滚动时固钉隐藏,当停止滚动时固钉出现