현재 버전

예제를 하나 만들어드립니다. 참고하시면 도움이 되실겁니다. 그리고 scroll event는 너무 빈번하게 자주 일어나기 때문에 적절하게 발생 주기를 조절해야합니다. 이 관련은 직접 하시길 바라면서 관련 사이트 주소를 첨부해드립니다.


* Scroll event throttling

https://developer.mozilla.org/ko/docs/Web/API/Document/scroll_event#%EC%8A%A4%ED%81%AC%EB%A1%A4_%EC%9D%B4%EB%B2%A4%ED%8A%B8%EC%9D%98_%EC%A1%B0%EC%A0%88


* Example (예제를 스크롤 해보세요)

https://codesandbox.io/s/quizzical-liskov-oxs4w?file=/src/App.js



function ContentA(props) {
const ref = useRef(null);
const [match, setMatch] = useState(false);

useEffect(() => {
const rectTop = ref.current.offsetTop;
const rectBottom = ref.current.offsetTop + ref.current.offsetHeight;
const isMatch = rectTop <= props.scrollY && rectBottom >= props.scrollY;
console.log("ContentA", rectTop, rectBottom, props.scrollY, isMatch);

setMatch(isMatch);
}, [props.scrollY]);

return (
<div ref={ref} className={match ? "Content Match" : "Content"}>
ContentA
</div>
);
}

function ContentB(props) {
const ref = useRef(null);
const [match, setMatch] = useState(false);

useEffect(() => {
const rectTop = ref.current.offsetTop;
const rectBottom = ref.current.offsetTop + ref.current.offsetHeight;
const isMatch = rectTop <= props.scrollY && rectBottom >= props.scrollY;
console.log("ContentB", rectTop, rectBottom, props.scrollY, isMatch);

setMatch(isMatch);
}, [props.scrollY]);

return (
<div ref={ref} className={match ? "Content Match" : "Content"}>
ContentB
</div>
);
}

function ContentC(props) {
const ref = useRef(null);
const [match, setMatch] = useState(false);

useEffect(() => {
const rectTop = ref.current.offsetTop;
const rectBottom = ref.current.offsetTop + ref.current.offsetHeight;
const isMatch = rectTop <= props.scrollY && rectBottom >= props.scrollY;
console.log("ContentC", rectTop, rectBottom, props.scrollY, isMatch);

setMatch(isMatch);
}, [props.scrollY]);

return (
<div ref={ref} className={match ? "Content Match" : "Content"}>
ContentC
</div>
);
}

export default function App() {
const [scrollY, setScrollY] = useState(0);

useEffect(() => {
const handler = () => {
setScrollY(window.scrollY);
};
window.addEventListener("scroll", handler);
return () => window.removeEventListener("scroll", handler);
}, []);
return (
<div className="App">
<ContentA scrollY={scrollY} />
<ContentB scrollY={scrollY} />
<ContentC scrollY={scrollY} />
</div>
);
}


수정 이력

2021-02-02 09:37:16 에 아래 내용에서 변경 됨 #1

예제를 하나 만들어드립니다. 참고하시면 도움이 되실겁니다. 그리고 scroll event는 너무 빈번하게 자주 일어나기 때문에 적절하게 발생 주기를 조절해야합니다. 이 관련은 직접 하시길 바라면서 관련 사이트 주소를 첨부해드립니다.


* Scroll event throttling

https://developer.mozilla.org/ko/docs/Web/API/Document/scroll_event#%EC%8A%A4%ED%81%AC%EB%A1%A4_%EC%9D%B4%EB%B2%A4%ED%8A%B8%EC%9D%98_%EC%A1%B0%EC%A0%88


* Example

https://codesandbox.io/s/quizzical-liskov-oxs4w?file=/src/App.js



function ContentA(props) {
const ref = useRef(null);
const [match, setMatch] = useState(false);

useEffect(() => {
const rectTop = ref.current.offsetTop;
const rectBottom = ref.current.offsetTop + ref.current.offsetHeight;
const isMatch = rectTop <= props.scrollY && rectBottom >= props.scrollY;
console.log("ContentA", rectTop, rectBottom, props.scrollY, isMatch);

setMatch(isMatch);
}, [props.scrollY]);

return (
<div ref={ref} className={match ? "Content Match" : "Content"}>
ContentA
</div>
);
}

function ContentB(props) {
const ref = useRef(null);
const [match, setMatch] = useState(false);

useEffect(() => {
const rectTop = ref.current.offsetTop;
const rectBottom = ref.current.offsetTop + ref.current.offsetHeight;
const isMatch = rectTop <= props.scrollY && rectBottom >= props.scrollY;
console.log("ContentB", rectTop, rectBottom, props.scrollY, isMatch);

setMatch(isMatch);
}, [props.scrollY]);

return (
<div ref={ref} className={match ? "Content Match" : "Content"}>
ContentB
</div>
);
}

function ContentC(props) {
const ref = useRef(null);
const [match, setMatch] = useState(false);

useEffect(() => {
const rectTop = ref.current.offsetTop;
const rectBottom = ref.current.offsetTop + ref.current.offsetHeight;
const isMatch = rectTop <= props.scrollY && rectBottom >= props.scrollY;
console.log("ContentC", rectTop, rectBottom, props.scrollY, isMatch);

setMatch(isMatch);
}, [props.scrollY]);

return (
<div ref={ref} className={match ? "Content Match" : "Content"}>
ContentC
</div>
);
}

export default function App() {
const [scrollY, setScrollY] = useState(0);

useEffect(() => {
const handler = () => {
setScrollY(window.scrollY);
};
window.addEventListener("scroll", handler);
return () => window.removeEventListener("scroll", handler);
}, []);
return (
<div className="App">
<ContentA scrollY={scrollY} />
<ContentB scrollY={scrollY} />
<ContentC scrollY={scrollY} />
</div>
);
}