javascript - 如何根据屏幕大小更改 window.scrollY 侦听器 React

问题描述

我有一个 useEffect 钩子，它使文本在滚动到其路线时淡入。它在我的 27 英寸 MAC 屏幕上效果很好，但是当我使用小屏幕时，我不太确定如何更改 useEffect 以收听不同的屏幕尺寸。


//these are my two useEffect hooks to make the different texts appear.

  useEffect(() => {
    const handleScroll = () => {
   
      const show = window.scrollY > 1200;

      if (show) {
        setName("nameAppear");
      } else {
        setName("name");
      }
    };

    document.addEventListener("scroll", handleScroll);
    return () => {
      document.removeEventListener("scroll", handleScroll);
    };
  }, []);

  useEffect(() => {

      const handleScroll = () => {
        const show = window.scrollY > 1100;
        if (show) {
          setText("textAppear")
        } else {
          setText("text")
        }
      };
      document.addEventListener("scroll", handleScroll);
      return () => {
        document.removeEventListener("scroll", handleScroll);
      };


  }, [])

这是整个组件。


import React, { useEffect, useRef, useState } from "react";
import { Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/core";


const aboutMeStyles = makeStyles((theme) => ({


  name: {
    opacity: "0",
    position: "relative",
    transition: "1s",
    textAlign: "center",
    top: "40%"
  
  },

  nameAppear: {
    opacity: "1",
    position: "relative",
    textAlign: "center",
    transition: "1s",
    top: "40%",
    fontSize: "50px"
  },

  text: {
    fontSize: "20px",
    position: "relative",
    textAlign: "center",
    top: "40%",
    opacity: "0",
    transition: "3s"
  },

  textAppear: {
    fontSize: "20px",
    position: "relative",
    textAlign: "center",
    top: "40%",
    opacity: "1",
    transition: "3s"
  },

  div: {


    height: "1300px",
    top: "80%",
    [theme.breakpoints.down('lg')]: {
      height: "1000px",
      
    },
  },







}));

export default function AboutMe() {
  const classes = aboutMeStyles();

  //set state for fade in and out

  const [name, setName] = useState("name");
  const [text, setText] = useState("text")

  const nameRef = useRef();
  const textRef = useRef()

  nameRef.current = name
  textRef.current = text

  useEffect(() => {
    const handleScroll = () => {
   
      const show = window.scrollY > 1200;

      if (show) {
        setName("nameAppear");
      } else {
        setName("name");
      }
    };

    document.addEventListener("scroll", handleScroll);
    return () => {
      document.removeEventListener("scroll", handleScroll);
    };
  }, []);

  useEffect(() => {

      const handleScroll = () => {
        const show = window.scrollY > 1100;
        if (show) {
          setText("textAppear")
        } else {
          setText("text")
        }
      };
      document.addEventListener("scroll", handleScroll);
      return () => {
        document.removeEventListener("scroll", handleScroll);
      };


  }, [])
  return (
    <>
     <div id = "AboutMe" className = {classes.div}>
      <Typography className={classes[nameRef.current]}>HI I'M WILLIAM</Typography>
      <br></br>
      <Typography className={classes[textRef.current]}>A full stack engineer with a focus</Typography>
      <Typography className={classes[textRef.current]}>on front end development</Typography>
      <br></br>
      <Typography className={classes[textRef.current]}>Proficient in React.JS, Redux, MERN stack,</Typography>
      <Typography className={classes[textRef.current]}>Node.JS, Javascript, HTML, and CSS.</Typography>
      
    </div>
    </>
  );
};

我决定当屏幕变小时把东西移近一点，这样我的路线仍然可以正常工作，而且没有太多的空白。意味着我需要根据屏幕大小更改此部分

      const show = window.scrollY > 1200;

      if (show) {
        setName("nameAppear");
      } else {
        setName("name");
      }
    };

我已经尝试添加条件，但根本没有用，但我不确定我做得是否正确。

任何指导将不胜感激！！

先感谢您

标签： javascriptreactjsmaterial-ui

javascript - 如何根据屏幕大小更改 window.scrollY 侦听器 React

问题描述

解决方案

推荐阅读