React에서 텍스트 오버플로우 감지 및 스크롤 애니메이션 구현하기
개발 부스러기는 완결된 형식의 글이 아닌, 다양한 시행착오를 기록하는 글입니다.1. 요구사항 부모 요소(투명)가 있고 그 아래에 자식 요소가 왼쪽(초록), 오른쪽(핑크) 끝에 배치되어야 함 (모두 flexbox 적용)왼쪽 자식 요소의 아래에 헤딩 또는 span 요소로 감싼 긴 텍스트(파랑)가 들어가는데, 공백으로 인한 줄 바꿈이 일어나지 않는 상태따라서 텍스트 오버플로우가 발생할 수 있음. 만약 오버플로우가 발생했다면, 오른쪽(핑크)의 영역을 침범했는지 확인침범한 경우 오버플로우로 인해 잘린 텍스트를 표시하기 위해 다음 사항을 적용텍스트 요소에 마우스를 올렸을 때(hover) 왼쪽으로 스크롤되는 애니메이션 실행2. 오버플로우 감지하기1. 상태값 및 DOM 요소 참조값 선언오버플로우가 발생했는지를 나타내는..
개발 부스러기
2024. 9. 15. 14:38