极客教程如何使用jQuery在向下滚动页面时显示滚动更新
在这篇文章中，我们将学习在网页上向下滚动时显示滚动更新。scroll()事件处理程序可以用来检测页面中的任何滚动，但我们只需要检测向下滚动的情况。可以用scroll()和scrollTop()事件来处理向下滚动的事件。
HTML DOM Window Scroll() 方法:当用户滚动到一个元素的不同位置时，滚动事件被发送到该元素。它适用于窗口对象，但也适用于可滚动的框架和CSS溢出属性设置为滚动的元素。
语法:
$( "#id" ).scroll(function() {});
scrollTop(): 获取匹配元素集合中第一个元素的滚动条的当前垂直位置，或者设置每个匹配元素的滚动条的垂直位置。这个方法不接受任何参数。
语法:
$( "#id" ).scrollTop( );
步骤:
- 我们将设置初始垂直位置为0
- 如果有任何滚动，它将被scroll()事件检测到，并且使用scrollTop()事件获取当前的垂直位置。
- 如果初始垂直位置小于（<）当前垂直位置，则显示 “向下滚动检测 “的文字。
- 使用以下代码，文本将被淡化。
$("#updater").fadeOut(1000);
- 如果初始垂直位置大于（>）当前垂直位置，那么输出文本显示属性将被设置为 “无”。
$("#updater").css('display','None');
例子：下面的代码演示了上述方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
var x = 0;
(document).ready(function () {
var prevPosition = 0;
var currPosition;
('p').css('margin-bottom', '50px');
("div").scroll(function () {
currPosition =("div").scrollTop();
if (prevPosition < currPosition) {
("#updater").css('display', 'block');
("#updater").fadeOut(1000);
prevPosition = currPosition;
}
else if (prevPosition >= currPosition) {
$("#updater").css('display', 'None');
prevPosition = currPosition;
}
});
});
</script>
</head>
<body>
<h1> update the scroll down event </h1>
<div style="height:300px;
width:100%; overflow:scroll;">
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
<p>some data</p>
</div>
<h1 id="updater" style="display:none;">
scroll down detected
</h1>
</body>
</html>
输出:
