(React onScroll) 如何触发 onScoll 事件答案

【问题标题】：(React onScroll) How to trigger onScoll event(React onScroll) 如何触发 onScoll 事件
【发布时间】：2021-10-22 22:03:03
【问题描述】：

我正在尝试通过根据其在浏览器中的位置更改其不透明度来为名片制作动画，从而创建某种淡入淡出的外观，但这与关键帧动画不同，因为它不是定时的，而是完全取决于滚动条的位置（有点像苹果产品网站）。我在反应中这样做并且正在使用 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;

任何帮助将不胜感激！

【问题讨论】：

标签： javascript css reactjs react-hooks

【解决方案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;

这是一个相关的帖子，其中包含可能对您有所帮助的解决方案：Changing styles when scrolling React

【讨论】：