How to trigger a function on a scroll event in react

Question

Based on the React documentation that I looked at, I think I would use "useRef" to update a function, but I'm not sure. I want to fire an event to mute a video there is a scroll event. Right now I'm using onClick to play/pause the video.

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;

This is not the same How to add scroll event in react component because I am not extending the function as a component.

Does this answer your question? How to add scroll event in react component — lifeisfoo
– lifeisfoo, Commented Dec 1, 2020 at 17:53

score 1 · Accepted Answer · 2020-12-01 22:37:37Z

1

I used onScroll={()=> someFunc()}

edited Dec 1, 2020 at 22:37

answered Dec 1, 2020 at 21:10

user14518353

Sign up to request clarification or add additional context in comments.

Comments

keshav · Accepted Answer · 2020-12-01 17:55:43Z

0

Using scroll event listener you should be able to achieve what you are seeking.

inside useEffect define an event scroll listener

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

       // your logic goes here
      });

answered Dec 1, 2020 at 17:55

keshav

1354 bronze badges

4 Comments

user14518353 Over a year ago

would I use onScroll in my video element and call the function there?

user14518353 Over a year ago

I tried this: useEffect(() => { document.addEventListener("scroll", function (e) { e.setMuted(true) }); }); is that what you meant?

user14518353 Over a year ago

when I add useEffect(() => { document.addEventListener("scroll", function (e) { e.alert("hi"); }); }); nothing happens

keshav Over a year ago

don't use e.alert. Just try alert("hi"). It should work. Also don't do e.setMuted(true), e is the event object. Try using setMuted(true) Directly.

Collectives™ on Stack Overflow

How to trigger a function on a scroll event in react

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related