如何使用 JavaScript 识别正在使用哪个元素滚动？

给定 DOM 中的许多元素，任务是找出当前正在使用 JavaScript 滚动的元素。

方法：这个问题可以使用 JavaScript 轻松解决。我们将为所有必需的元素添加“滚动”事件侦听器。每当滚动特定元素时都会触发滚动事件。因此，我们可以借助它轻松找出正在滚动的元素。

示例：在此示例中，我们创建了两个可滚动元素，并为它们添加了“滚动”事件侦听器。一旦滚动任何元素，就会触发该特定元素的滚动事件。

HTML

  
    
    
    How to identify which element
      scroll is being used using JavaScript?
  
    
      h1 {
        color: #2f8d46;
        font-weight: bold;
        margin: 40px;
      }
  
      #first {
        height: 200px;
        width: 400px;
        overflow-y: scroll;
        margin: 40px;
      }
  
      #second {
        margin: 40px;
        height: 200px;
        width: 400px;
        overflow-y: scroll;
      }
  
      #scrolled {
        margin: 40px;
      }
    
  
  
    GeeksforGeeks
      
    
    
      First element
        

        JavaScript is a lightweight, cross-platform 
        and interpreted scripting language. It is well-known 
        for the development of web pages, many non-browser 
        environments also use it. JavaScript can be used for 
        Client-side developments as well as Server-side
        developments. JavaScript contains a standard library 
        of objects, like Array, Date, and Math, and a core
        set of language elements like operators, control
        structures, and statements.
        History of JavaScript: It was created in 1995
        by Brendan Eich while he was an engineer at Netscape.
        It was originally going to be named LiveScript but
        was renamed. Unlike most programming languages, 
        the JavaScript language has no concept of input
        or output. It is designed to run as a scripting 
        language in a host environment, and it is up to 
        the host environment to provide mechanisms for 
        communicating with the outside world. The most 
        common host environment is the browser.
      
  
    
  
    
    
      Second element
        

        JavaScript is a lightweight, cross-platform 
        and interpreted scripting language. It is well-known 
        for the development of web pages, many non-browser 
        environments also use it. JavaScript can be used for 
        Client-side developments as well as Server-side
        developments. JavaScript contains a standard library 
        of objects, like Array, Date, and Math, and a core
        set of language elements like operators, control
        structures, and statements.
        History of JavaScript: It was created in 1995
        by Brendan Eich while he was an engineer at Netscape.
        It was originally going to be named LiveScript but
        was renamed. Unlike most programming languages, 
        the JavaScript language has no concept of input
        or output. It is designed to run as a scripting 
        language in a host environment, and it is up to 
        the host environment to provide mechanisms for 
        communicating with the outside world. The most 
        common host environment is the browser.
      
  
    
  
    
      Element being scrolled: 
    
  
    
        
      <!--Selecting required elements from the DOM-->
      const first = document.querySelector("#first");
      const second = document.querySelector("#second");
      const result = document.querySelector("#result");
        
      <!--Adding the scroll event listener-->
      first.addEventListener("scroll", () => (result.textContent = "First"));
      second.addEventListener("scroll", () => (result.textContent = "Second"));
    
  

输出：