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

Question

根据我查看的 React 文档，我想我会使用“useRef”来更新函数，但我不确定。我想触发一个事件来使视频静音，有一个滚动事件。现在我正在使用 onClick 来播放/暂停视频。

视频.js

import 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) {&nbsp; &nbsp; &nbsp; &nbsp;// your logic goes here&nbsp; &nbsp; &nbsp; });