[react] scroll handling

scrollHeight : scroll 이 닿는 영역의 총 높이, scroll 이 존재하는 박스의 높이가 아니라 스크롤영역의 총 높이를 나타낸다.

 

clientHeight : 해당영역의 높이

 

 

overflow-y: auto;

일때 고정된 높이보다 해당하는 content의 높이가 더 높아질경우 스크롤이 생기게된다 ( clientHeight < scrollHeight 가 되면 스크롤이 생김)

 

스크롤을 초기의 영역에서 가운데이 위치시키고 싶은경우 :

scrollTop 속성을 시정해서 스크롤의 위치를 조정할수있다.(scrollTo)

 

 

const scrollRef = useCallback((wrapperNode) => {
    if (wrapperNode !== null) {
      const hasScroll = wrapperNode.scrollHeight > wrapperNode.clientHeight;
      if (hasScroll) {
        const scrollTop = (wrapperNode.scrollHeight - wrapperNode.clientHeight) / 2;
        wrapperNode.scrollTop = scrollTop;
      }
    }
  }, []);
  
  return ( 
    <section>
    	<TableHeader/>
        <TableList ref={scrollRef}> // React는 ref가 다른 노드에 연결될 때마다 해당 콜백을 호출합니다.
        	<li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        <TableList>
    </section>
   )

const scrollRef = useRef(null);

useEffect 안에서 로딩시마다 다시 정렬 시켜주는 코드로 짤수도 있는데 

https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node 

Hooks FAQ – React

안써본 방법이라 써봤는데 더 더 안정적인거 같다 변화감지인자를 빼먹을 위험이 덜한듯?