使用 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');

示例：以下代码演示了上述方法。

HTML

  

    
    
    
  
    
        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;
                }
            });
        });
    

  

     update the scroll down event 
    
          
        some data
        some data
        some data
        some data
        some data
        some data
        some data
        some data
        some data
        some data
    
    
        scroll down detected
    

  

输出：