예제 소개
HTML 영역에서 발생하는 scroll 이벤트를 canvas 영역으로 전달하여, scroll offset에 따라 canvas의 내용을 변경하는 방법을 알아봅니다.
스크롤 이벤트 전달하기
<Canvas /> 컴포넌트를 먼저 배치합니다.
다음 속성을 사용하여 <div> 요소를 canvas 위에 꽉 차게 배치 합니다.
{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', overflowY: 'scroll' }
이 요소 안에 빨간색 글자를 0 ~ 9까지 표시하여 overflow를 만들어 스크롤 이벤트가 발생하도록 합니다.
스크롤 이벤트에 따라 스크롤 비율 정보를 계산합니다.
불필요한 re-rendering이 발생하지 않도록 스크롤 비율은 useRef를 사용하여 전달합니다.
캔버스 영역에서는 이 스크롤 비율을 받아서 파란색 글자로 표시합니다.
스크롤 비율을 활용하기
<group /> 엘리먼트 안에 박스 2개를 그리고 그위에 <Html /> 컴포넌트를 사용하여 HTML 요소도 배치해 봅니다.
스크롤 비율에 따라 <group /> 엘리먼트의 위치를 변경하여, 박스가 위아래로 움직이는 효과를 줍니다.