如何在反应中触发滚动事件的函数

Question

根据我查看的 React 文档，我想我会使用“useRef”来更新函数，但我不确定。我想触发一个事件来使视频静音，有一个滚动事件。现在我正在使用 onClick 来播放/暂停视频。视频.jsimport React, { useRef, useState } from "react";import "./Video.css";function Video({ url }) {  const [muted, setMuted] = useState(true);  const [playing, setPlaying] = useState(false);  const videoRef = useRef(null);  var Chrome =    navigator.userAgent.includes("Chrome") &&    navigator.vendor.includes("Google Inc");  const onVideoPress = () => {    if (playing && !Chrome) {      videoRef.current.pause();      setPlaying(false);      setMuted(true);    } else if (playing && Chrome) {      videoRef.current.pause();      setPlaying(false);      setMuted(false);    } else {      videoRef.current.play();      setPlaying(true);      setMuted(false);    }  };  return (    <div className="video">      <video        className="video__player"        autoPlay={true}        loop={true}        muted={muted}        playsInline={true}        // controls        ref={videoRef}        onClick={onVideoPress}      >        <source className="video__controls" src={url} type="video/mp4"></source>      </video>      {/* <VideoFooter /> */}    </div>  );}export default Video;这与如何在反应组件中添加滚动事件不同，因为我没有将函数扩展为组件。

Answer 1

我用了 onScroll={()=> someFunc()}

Answer 2

使用滚动事件侦听器您应该能够实现您正在寻找的目标。

里面useEffect定义一个事件滚动监听器

document.addEventListener('scroll', function(e) {

       // your logic goes here

      });