HTML | DOM 轮事件

DOM WheelEvent 包含在检测到滚动时发生的事件。它可用于找出滚动方向、滚动量和滚动方式。它具有在发生滚动时调用的 onwheel 事件。

特性：

• deltaX：它返回鼠标滚轮在 x 轴上的水平滚动量。
• deltaY：它返回鼠标滚轮在 y 轴上的垂直滚动量。
• deltaZ：它返回鼠标滚轮在 z 轴上的滚动量。
• deltaMode：它返回用于增量值的测量单位。该值可能以像素、行或页为单位。

示例：此示例显示滚动属性。

      

    HTML DOM WheelEvent
      
    
        .area {
            height: 200px;
            width: 200px;
            border: 5px solid;
        }
    

  

    
        GeeksforGeeks
    
      
    HTML | DOM WheelEvent
      
    
        Try scrolling on the element below
        to check the scroll properties.
    
      
    
    
      
    
        function isScrolling(event) {
            console.log("X scroll direction:", event.deltaX);
            console.log("Y scroll direction:", event.deltaY);
            console.log("Z scroll direction:", event.deltaZ);
            console.log("Scroll Mode is:", event.deltaMode);
        }
    

  

输出：

• 在滚动 div 元素之前：
  
• 滚动 div 元素后的控制台输出：
  

事件类型：

• onwheel：每当鼠标滚轮在元素上向上或向下滚动时，就会发生此事件。

示例：此示例说明了 onwheel 事件。

      

    onwheel event type
      
    
        .area {
            height: 200px;
            width: 200px;
            border: 5px solid;
        }
    


    
        GeeksforGeeks
    
      
    HTML | DOM WheelEvent
      
    
        Try scrolling on the element below
        to call the onwheel function.
    
      
    
    
      
    
        function isScrolling() {
            console.log('You are scrolling"
                    + " in the element.')
        }
    

  

输出：

• 在滚动 div 元素之前：
  
• 滚动 div 元素后的控制台输出：
  

支持的浏览器： HTML DOM WheelEvent支持的浏览器如下：

• 谷歌浏览器 31
• 浏览器 9
• 火狐 17
• 苹果Safari
• 歌剧18