1. onscroll 事件在元素滚动条在滚动时触发。
HTML 中:
<element onscroll="myScript">
JavaScript 中:
object.onscroll=function(){myScript};
JavaScript 中, 使用 addEventListener() 方法:
object.addEventListener("scroll", myScript);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
border: 1px solid black;
width: 200px;
height: 100px;
overflow: scroll;
}
</style>
</head>
<body>
<p>尝试滚动 div。</p>
<div onscroll="myFunction()">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</div>
<p>滚动 <span id="demo">0</span> 次。</p>
<script>
x = 0;
function myFunction() {
document.getElementById("demo").innerHTML = x += 1;
}
</script>
</body>
</html>
2. onScrollCapture 监听鼠标滚动
一些属性:
网页可见区域高:document.body.clientHeight
:包括padding但不包括border、水平滚动条、margin的元素的高度
网页正文全文高:document.body.scrollHeight
网页可见区域高(包括边线的高):document.body.offsetHeight
:包括padding、border、水平滚动条,但不包括margin的元素的高度
网页被卷去的高:document.body.scrollTop
:代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度
屏幕分辨率高:window.screen.height:包括padding但不包括border、水平滚动条、margin的元素的高度
offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px,只读元素
const onScroll = (e) => {
if (e.target.scrollTop == 0) {
console.info('到顶');
if (obj.current === 1) {
message.warning('当前页为第一页')
return
}
const param = {
...obj,
current: obj.current - 1
}
getRegulatoryReportDetail(param)
//滚动条向上滑动加载页面时,滚动条停在最下面
e.target.scrollTop = e.target.scrollHeight
}
else if (e.target.scrollTop + e.target.clientHeight == e.target.scrollHeight) {
console.info('到底');
if (!load) {
message.warning('该敏感词记录加载完成')
return
}
const param = {
...obj,
current: obj.current + 1
}
getRegulatoryReportDetail(param)
//滚动条向下滑动加载页面时,滚动条停在最上面
e.target.scrollTop = 0
}
}
<div style={{ height: "532px" }} onScrollCapture={onScroll}></div>