如何在jQuery中的滚动事件上运行代码？

在本文中，我们将讨论如何在用户使用 jQuery 滚动内容时运行代码。为了在滚动内容时运行代码，使用了 scroll() 方法。 scroll() 方法用于在用户滚动指定元素时运行代码。

句法：

$(selector).scroll(function)

参数：此方法接受可选的单参数函数。用于指定触发滚动事件时要运行的函数。

方法：在下面的示例中，我们创建了一个包含元素内容的 div 元素，并且我们在 div 元素上使用了一些 CSS 样式。我们添加了一个 overflow-y 属性来滚动以使内容可滚动。当用户滚动 div 内容时，会调用 jQuery scroll() 方法，该方法包含 css() 方法，该方法将一些 CSS 样式应用于 div 元素。

例子：

HTML

  

    
    
  
    
        How to run a code on scroll event using jQuery?
    
  
    
    
  
    
        h1,
        h3 {
            text-align: center;
        }
  
        .GFG {
            width: 350px;
            height: 150px;
            border: 1px solid black;
            overflow-x: hidden;
            overflow-y: scroll;
            text-align: justify;
            display: flex;
            margin: 0 auto;
        }
    

  

    
        GeeksforGeeks
    
  
    
        How to run a code on scroll event using jQuery?
    
  
    
        HTML stands for HyperText Markup Language. It
        is used to design web pages using a markup
        language. HTML is the combination of Hypertext
        and Markup language. Hypertext defines the link
        between the web pages. A markup language is
        used to define the text document within tag
        which defines the structure of web pages. This
        language is used to annotate (make notes for
        the computer) text so that a machine can
        understand it and manipulate text accordingly.
        Most markup languages (e.g. HTML) are
        human-readable. The language uses tags to
        define what manipulation has to be done on
        the text.
    
  
    
        $(document).ready(function () {
            $(".GFG").scroll(function () {
                $(".GFG").css({
                    "fontSize": "18px", 
                    "color": "green"
                })
            });
        });
    

  

输出：