ReactJS - WheelEvent 處理程式

在 React JS 中，WheelEvent 處理程式函式用於響應滑鼠滾輪移動。這是一種在使用者使用滑鼠滾動時使我們的 React 應用程式具有互動性的方法。

滑鼠滾輪互動在線上應用程式中很常見，主要是在滾動內容時。因此，我們將瞭解 WheelEvent 介面以及如何在 React 應用程式中使用它來處理滑鼠滾輪事件。WheelEvent 介面顯示使用者移動滑鼠滾輪或類似輸入裝置時發生的事件。它提供了有關滾動操作的有用資訊。

語法

<div
   onWheel={e => console.log('onWheel')}
/>

請記住，將 onWheel 事件附加到我們想要使其可滾動的元素上。這只是一個基本的介紹，我們可以根據我們的具體需求自定義處理程式函式。

引數

e - 它是一個 React 事件物件。我們可以將其與 WheelEvent 屬性一起使用。

WheelEvent 的屬性

示例

示例 - 帶有 Wheel Event 處理程式的簡單應用程式

現在讓我們建立一個小的 React 應用程式來展示如何在應用程式中使用 WheelEvent。使用 WheelEvent 介面，我們將建立一個跟蹤滾動事件的元件。程式碼如下所示：

import React from 'react';

class App extends React.Component {
   handleWheelEvent = (e) => {
      console.log('onWheel');
      console.log('deltaX:', e.deltaX);
      console.log('deltaY:', e.deltaY);
      console.log('deltaZ:', e.deltaZ);
      console.log('deltaMode:', e.deltaMode);
   };   
   render() {
      return (
         <div onWheel={this.handleWheelEvent}>
            <h1>Mouse WheelEvent Logger</h1>
            <p>Scroll mouse wheel and check the console for event details.</p>
         </div>
      );
   }
}

export default App;

輸出

在此元件中，我們建立了一個 onWheel 事件處理程式，它記錄有關滾輪事件的資訊，例如 deltaX、deltaY、deltaZ 和 deltaMode，如我們在輸出中看到的。

示例 - 滾動元件應用程式

在此示例中，當用戶使用滑鼠滾輪滾動時，會觸發 handleScroll 函式。event.deltaY 為我們提供了有關滾動方向和強度的資訊。

import React from 'react';

class ScrollComponent extends React.Component {
   handleScroll = (event) => {
      // This function will be called when the user scrolls
      console.log('Mouse wheel moved!', event.deltaY);
   };   
   render() {
      return (
         <div onWheel={this.handleScroll}>
            <p>Scroll me with the mouse wheel!</p>
         </div>
      );
   }
}

export default ScrollComponent;

輸出

示例 - 滾動時更改背景顏色

這是另一個使用 WheelEvent 處理程式函式的簡單 React 應用程式。這次，我們將建立一個應用程式，其中背景顏色根據滑鼠滾輪滾動的方向而變化：

import React, { useState } from 'react';

const ScrollColorChangeApp = () => {
   const [backgroundColor, setBackgroundColor] = useState('lightblue');   
   const handleScroll = (event) => {
      
      // Change the background color based on the scroll direction
      if (event.deltaY > 0) {
         setBackgroundColor('lightgreen');
      } else {
         setBackgroundColor('lightcoral');
      }
   };   
   return (
      <div
         onWheel={handleScroll}
         style={{
            height: '100vh',
            display: 'flex',
            alignItems: 'center',
            backgroundColor: backgroundColor,
            transition: 'background-color 0.5s ease',
         }}
      >
         <h1>Scroll to Change Background Color</h1>
      </div>
   );
};

export default ScrollColorChangeApp;

輸出

總結

WheelEvent 介面在 React 應用程式中用於處理滑鼠滾輪事件非常有用。它提供了有關使用者滾動行為的有用資訊，例如滾動方向和強度。透過使用 WheelEvent 介面，我們可以建立更動態和響應式的 Web 應用程式，從而改善使用者體驗。