(React onScroll)如何觸發onScoll事件

Question

我正在嘗試根據名片在瀏覽器中的位置改變其不透明度來為名片制作動畫，從而創建淡入淡出的外觀，但這與關鍵幀 animation 不同，因為它不定時但完全依賴於滾動條的 position（有點像 Apple 產品網站）。 我在反應中這樣做並使用 onScroll JSX 屬性，但它似乎沒有觸發。 每張卡的高度為 100vh。

import React, {useState} from 'react'
import './styles.css'
import Card1 from './Card1'

function App() {
  const [idx, setIdx] = useState(1); 
  
  const iterate = () => {
    console.log('scrolled')
  } 

  return (
    <div className="outer-container" onScroll={iterate}>
        <Card1 num = {idx}/> 
        <Card1 num = {idx}/> 
        <Card1 num = {idx}/> 
        <Card1 num = {idx}/> 
        <Card1 num = {idx}/> 
        <Card1 num = {idx}/> 
    </div>); 
}

export default App;

任何幫助將非常感激！

Answer 1

這可能是您正在尋找的：

import React, { useState, useEffect } from "react";
import "./styles.css";
import Card1 from "./Card1";

function App() {
  const [idx, setIdx] = useState(1);

  useEffect(() => {
    const handleScroll = () => {
      // code here will be executed on the scroll event
    };

    window.addEventListener("scroll", handleScroll);

    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const iterate = () => {
    console.log("scrolled");
  };

  return (
    <div className="outer-container" onScroll={iterate}>
      <Card1 num={idx} />
      <Card1 num={idx} />
      <Card1 num={idx} />
      <Card1 num={idx} />
      <Card1 num={idx} />
      <Card1 num={idx} />
    </div>
  );
}

export default App;

這是一篇相關文章，其中包含可能對您有所幫助的解決方案： 滾動 React 時更改 styles