(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