Javascript 如何在react中触发滚动事件的函数

我会怎么反应呢？根据我看过的文档，我想我会使用“useRef”，但我不确定。如果在视频元素上有滚动事件时取消静音，我想触发一个事件使视频静音。现在我使用onClick来播放/暂停视频，但我想在滚动上切换静音和非静音

Video.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;

import React，{useRef，useState}来自“React”；
导入“/Video.css”；
函数视频（{url}）{
const[muted，setMuted]=useState（true）；
const[playing，setPlaying]=useState（false）；
const videoRef=useRef（空）；
var铬=
navigator.userAgent.includes（“Chrome”）&&
navigator.vendor.includes（“谷歌公司”）；
const onVideoPress=（）=>{
如果（播放&&！Chrome）{
videoRef.current.pause（）；
布景播放（假）；
设置静音（true）；
}else if（播放和浏览）{
videoRef.current.pause（）；
布景播放（假）；
设置静音（假）；
}否则{
videoRef.current.play（）；
布景播放（真实）；
设置静音（假）；
}
};
返回(
{/*  */}
);
}
导出默认视频；

---

这是不一样的，因为我没有将函数扩展为组件。

使用滚动事件侦听器，您应该能够实现所需的功能

• 在

  useffect

  内部定义事件滚动侦听器

  document.addEventListener('scroll', function(e) {
  
         // your logic goes here
        });
  

---

使用滚动事件监听器，您应该能够实现您的目标

• 在

  useffect

  内部定义事件滚动侦听器

  document.addEventListener('scroll', function(e) {
  
         // your logic goes here
        });
  

---

我使用了onScroll={（）=>someFunc（）}

我使用了onScroll={（）=>someFunc（）}

这回答了你的问题吗？否-这是否回答了您的问题？否-编辑我的QS我会在我的视频元素中使用onScroll并在那里调用函数吗？我尝试了以下方法：

useffect（（）=>{document.addEventListener（“滚动”，函数（e）{e.setMuted（true）}；}）useffect（（）=>{document.addEventListener（“滚动”，函数（e）{e.alert（“hi”）；}）无任何事件不要使用e.alert。试试警惕（“嗨”）。它应该会起作用。也不要执行e.setmute（true），e是事件对象。试着直接使用setMuted（true）。这也行得通。我能在我的视频元素中使用onScroll并调用那里的函数吗？我试过：
useffect（（）=>{document.addEventListener（“scroll”，function（e）{e.setMuted（true）}；}）useffect（（）=>{document.addEventListener（“滚动”，函数（e）{e.alert（“hi”）；}）无任何事件不要使用e.alert。试试警惕（“嗨”）。它应该会起作用。也不要执行e.setmute（true），e是事件对象。尝试直接使用setmute（true）。这也很有效，请尝试