[ Hook ] useScroll

🔴  Introduction

⚪  현재 스크롤의 y 좌표 값을 구해서 리턴해주는 Hook

 

🟠  Hook

 

import { useState, useEffect } from "react";

export const useScroll = () => {
    const [state, setState] = useState({
        x: 0,
        y: 0,
    });
    const onScroll = () => {
        setState({ y: window.scrollY, x: window.scrollX });
    };
    useEffect(() => {
        window.addEventListener("scroll", onScroll);
        return () => window.removeEventListener("scroll", onScroll);
    }, []);
    return state;
};

 

🟡  Usage

 

import styled from "styled-components";
import { useScroll } from "./hooks/useScroll";

function App() {
    const { y } = useScroll();
    return <Box style={{ backgroundColor: y > 100 ? "red" : "blue" }}></Box>;
}

const Box = styled.div`
    height: 200vh;
`;

export default App;