ReactHooks——监听窗口大小、滚动距离、滚动方向

监听窗口大小

重要代码

  //获取当前窗口大小
  const getWindowSize = () => ({
    innerHeight: window.innerHeight,
    innerWidth: window.innerWidth,
  });
  const [windowSize, setWindowSize] = useState(getWindowSize());
  const handleResize = () => {
    setWindowSize(getWindowSize());
  };
  useLayoutEffect(() => {
    // 监听
    window.addEventListener("resize", changeDataList);
    //初始化加载
    changeDataList()
    // 销毁
    return () => window.removeEventListener("resize", handleResize);
  },[]);

less部分

.bookdiv{
    .bookdiv_child{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        .booklist{
            width: 159px;
            img{
                width: 149px;
                height: 200px;
            }
            .read_name{
                color: #000;
                font-size: 18px;
                text-align: center;
            }
        }
    }
    & .bookdiv_child:last-child{
        justify-content: start;
    }
}

全部代码

import Header from "../../components/header/index";
import Footer from "../../components/footer/index";
import { bookdata } from "./js/data";
import { chunk } from "lodash";
import {useLayoutEffect, useEffect, useState } from "react";

const Read = () => {
  const [newDataList, setDataList]: any = useState([]);
  //重组数组
  const changeDataList = () => {
    const num = Math.floor((document.documentElement.scrollLeft+document.documentElement.clientWidth)/159);
    const data = chunk(bookdata, num);
    setDataList(data);
  };
  //获取当前窗口大小
  const getWindowSize = () => ({
    innerHeight: window.innerHeight,
    innerWidth: window.innerWidth,
  });
  const [windowSize, setWindowSize] = useState(getWindowSize());
  const handleResize = () => {
    setWindowSize(getWindowSize());
  };
  useLayoutEffect(() => {
    // 监听
    window.addEventListener("resize", changeDataList);
    //初始化加载
    changeDataList()
    // 销毁
    return () => window.removeEventListener("resize", handleResize);
  },[]);
  return (
    <>
      <Header headeractive={4}></Header>
      <div className="bookdiv">
        {newDataList.map((item: any, index: any) => {
          return (
            <div className="bookdiv_child" key={index}>
              {item.map((itemchild: any) => {
                return (
                  <div
                    key={itemchild.id + index}
                    className={`booklist animate__animated ${itemchild.classname}`}
                  >
                    <div className="centerimg">
                      <img src={itemchild.imgsrc} alt={itemchild.name} />
                    </div>
                    <div className="read_name">{itemchild.name}</div>
                  </div>
                );
              })}
            </div>
          );
        })}
      </div>
      <Footer></Footer>
    </>
  );
};
export default Read;

监听窗口滚动距离

  const handleResize = () => {
    setWindowSize(getWindowSize());
  };
  const getWindowSize = () => {
    let h5Scroll = {
      scrollTop: 0,
    };
    if (document?.documentElement && document?.documentElement?.scrollTop) {
      h5Scroll.scrollTop = document.documentElement.scrollTop;
    } else if (document?.body) {
      h5Scroll.scrollTop = document.body.scrollTop;
    }
    console.log(h5Scroll.scrollTop)
    return h5Scroll;
  };
  const [windowSize, setWindowSize] = useState(getWindowSize());
  useEffect(() => {
    window.addEventListener("scroll", handleResize);
    return () => {
      window.removeEventListener("scroll", handleResize);
    };
  }, []);

监听滚动方向

js部分

 const [positionFlag, setpositionFlag] = useState(false);
  let valueTop = 0;
  let scrollTop = 0;
  const getWindowSize = () => {
    let h5Scroll = {
      scrollTop: 0,
    };
    if (document?.documentElement && document?.documentElement?.scrollTop) {
      scrollTop = document.documentElement.scrollTop;
    } else if (document?.body) {
      scrollTop = document.body.scrollTop;
    }
    setTimeout(() => {
      valueTop = scrollTop;
    }, 0);
    if (valueTop < scrollTop) {
      console.log("向下");
      setpositionFlag(false);
    }
    if (valueTop > scrollTop) {
      console.log("向上");
      setpositionFlag(true);
    }
    return h5Scroll;
  };
  useEffect(() => {
    window.addEventListener("scroll", getWindowSize);
    return () => {
      window.removeEventListener("scroll", getWindowSize);
    };
  }, []);

页面结构

      <div
        className={mergeClass({
          ceiling: positionFlag,
          noneceiling: !positionFlag,
        })}
      >
        <Marqueecom data={marqueedata}></Marqueecom>
      </div>

全部代码

import Header from "../../components/header/index";
import Footer from "../../components/footer/index";
import Marqueecom from "./components/marquee";
import { TRAVEL_DATA, marqueedata } from "./js/data";
import { useEffect, useState } from "react";
import mergeClass from "../../utils/mergeClass";
const Travel = () => {
  const [positionFlag, setpositionFlag] = useState(false);
  let valueTop = 0;
  let scrollTop = 0;
  const getWindowSize = () => {
    let h5Scroll = {
      scrollTop: 0,
    };
    if (document?.documentElement && document?.documentElement?.scrollTop) {
      scrollTop = document.documentElement.scrollTop;
    } else if (document?.body) {
      scrollTop = document.body.scrollTop;
    }
    setTimeout(() => {
      valueTop = scrollTop;
    }, 0);
    if (valueTop < scrollTop) {
      console.log("向下");
      setpositionFlag(false);
    }
    if (valueTop > scrollTop) {
      console.log("向上");
      setpositionFlag(true);
    }
    return h5Scroll;
  };
  useEffect(() => {
    window.addEventListener("scroll", getWindowSize);
    return () => {
      window.removeEventListener("scroll", getWindowSize);
    };
  }, []);

  return (
    <div className="travel">
      <Header headeractive={3}></Header>
      <div
        className={mergeClass({
          ceiling: positionFlag,
          noneceiling: !positionFlag,
        })}
      >
        <Marqueecom data={marqueedata}></Marqueecom>
      </div>
      <main>
        {TRAVEL_DATA.map((item, index) => {
          return (
            <div
              key={index}
              className={`travel_div animate__animated ${item.classname}`}
            >
              <img src={item.imgsrc} alt="" />
            </div>
          );
        })}
      </main>
      <Footer></Footer>
    </div>
  );
};
export default Travel;