設定 onScroll 事件後的元件樣式

1. 為類元件 React onScroll 事件
2. 為功能元件 React onScroll 事件

在開發 React 應用程式時，通常需要聽取使用者的輸入並相應地更新狀態。例如，你可能希望突出顯示當前在使用者檢視中的元件。

要有條件地更新元件的樣式，建議你使用 CSS-in-JS 解決方案，例如內聯元件或 styled-components 庫。

在繼續之前，你必須為 scroll 事件設定一個事件偵聽器：window.addEventListener('scroll')。然後你可以為滾動事件定義一個處理函式。

為類元件 React onScroll 事件

儘管設計略有不同，但 React 類元件與功能元件非常相似。兩者之間的一大區別是類元件沒有鉤子。相反，我們可以使用生命週期方法之一。

componentDidMount()

為簡單起見，讓我們使用具有最可預測行為的生命週期方法。在為 scroll 事件設定偵聽器後，我們必須將處理程式作為第二個引數傳遞給 window.addEventListener() 方法。然後，在生命週期方法中，我們必須呼叫處理程式。讓我們看一下 playcode.io 中的這個例子：

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      fontSize: 16
    }
    this.handleScroll = this.handleScroll.bind(this)
  }
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
    this.handleScroll();
  };
  handleScroll(event)  {
    this.setState({fontSize: window.pageYOffset})
  }
  render() {
    return <div style={{height: "150vh", width: "80vw", fontSize: this.state.fontSize, marginTop: "100px"}}>Hi! Try edit me</div>;
  }
}

每次 <div> 元素滾動時，我們的元件都會因為狀態的變化而重新渲染。處理程式根據視窗物件的 pageYOffset 屬性更新狀態。window.pageYOffset 的這個值顯示了我們向下滾動的距離。

前往 playcode.io 並親自嘗試一下。向下滾動得越遠，字型就會越大。

為功能元件 React onScroll 事件

要根據滾動事件觸發更改，首先必須為此事件設定偵聽器。這可以通過呼叫 window.addEventListener('scroll') 方法來完成。請注意，你必須傳遞一個字串，該字串指定你在呼叫中偵聽的事件型別。在這種情況下，我們通過'scroll'。第二個引數應該是對事件處理程式的引用。

useEffect()

你可以將 useEffect() 視為所有類元件的生命週期鉤子的組合。在這種情況下，為了複製 componentDidMount() 鉤子的行為，我們將傳遞一個空陣列作為第二個引數。例子：

const [fontSize, setFontSize] = useState(0);
const handleScroll = () => setFontSize(window.pageYOffset)
  useEffect(() => {
    window.addEventListener('scroll', handleScroll)
  }, []);

fontSize 變數的值將動態變化。你可以在內聯樣式中引用它以更改元素的樣式。

<div style={{height: "150vh", width: "80vw", fontSize: fontSize, marginTop: "100px"}}>Hi! Try edit me</div>;

請注意，我們傳遞了對功能元件中狀態變數的簡單引用，而不是 this.state 物件。