[React three drei] Scroll 파헤치기

drei 에는 ScrollControls 라는 기능이 있다.

Dom에서 스크롤 이벤트를 통해 Canvas를 조작할 수 있는 기능.

재밌는 것을 위해 사부작대던 중, 버그가 있는 것을 발견하고 이 부분을 심층적으로 파볼까 싶어 글을 작성하게 되었다.

 

Scroll controls create a HTML scroll container in front of the canvas. Everything you drop into the <Scroll> component will be affected.

 

스크롤 컨트롤은 캔버스 앞에 HTML 스크롤 컨테이너를 만듭니다. <스크롤> 컴포넌트에 놓는 모든 것이 영향을 받습니다. 라고 deepL씨의 도움을 받아 이해하게 됐다.

 

Dom Node을 비교해보면 확연하다. 왼쪽은 ScrollControls가 코드에 있는 상태, 오른쪽은 없는 상태이다.

ScrollControls 컴포넌트를 삽입한 쪽은 Dom 에 뭔가 Scroll 할 수 있는 Node가 생긴 것을 확인할 수 있다.

이것때문에 스크롤을 할 수 있게 된 것이다.

왼쪽 하늘색 상자 바로 밑의 라인을 보면 height:500%; 인 것을 알 수 있는데, 이것은 ScrollControls의 pages속성의 값으로 스크롤 영역의 길이를 정의한다. 

 

 

여기서 내가 발견한 버그는 ScrollControls 밖에 있는 컴포넌트 또한 Scroll 이벤트가 발생한다는 것!

이렇게 ScrollControls 밖에 Html을 작성했을 때, 고정되면 좋겠지만, 결과는 Scroll 이벤트가 발생한다.

 

Dom Node도 역시, 슬프게도 스크롤 영역 안으로 슉 들어가버린다.

 

 

 

Q. 고정시키고 싶은 무언가가 있고, 스크롤하고 싶은 무언가가 같은 화면에 공존해야한다면?

고정하고 싶은 것인 문자일 경우, Canvas 밖으로 빼고 별도 Html로 작성한다.

스크롤에 따른 애니메이션 처리를 별도로 해야 하는 번거로움이 있다. 

 

Q. ScrollControls의 속성인 enabled로 값을 조정한다면?

이미 Dom에는 컴포넌트가 스크롤 영역안에 렌더링된 상태기 때문에 속성을 조정한다고 해도 스크롤 영역의 값이 달라지거나 하지 않는다.

enabled는 webGL의 영역의 속성으로 보인다. 이미 html 태그로 렌더링 된 node 에는 적용되지 않는다.