如何使用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>