부드러운 스크롤바 > 팁 & 테크

안녕하세요\~ 여러모로 쓸 일이 있어 부드러운 스크롤바를 챗지피티님과 함께 만들어보았습니다. 외부 smooth-scroll 라이브러리는 사용하지 않았고, wheel 이벤트와 requestAnimationFrame을 활용하여 구현했습니다. 내부 요소에 스크롤이 있는 경우에도 document 요소에 스크롤 되는 문제가? 있어서 내부 요소에 스크롤이 있는 경우를 계산해 이 경우 부드러운 스크롤이 적용되지 않도록 처리해 놓았습니다만 뭔가 더 최선의 방법이 있을 것 같으면서도 현재로서는 잘 모르겠네요,,ㅎ 내부 요소에 스크롤바가 있는지를 검사하는 로직에서 1\. scrollHeight\(또는 scrollWidth\)와 clientHeight를 비교 2\. 요소에 overflow: hidden인지\, 그러한 경우에 position: absolute인 자식 요소가 있는지 검사 하는데 이 두 경우를 만족하는데도 내부에 스크롤이 있다고 나오는 부분이 좀 있더라고요... 이유를 모르겠습니다. 그래서 그냥 원시적인 방법으로 스크롤바가 있으면 반대 축의 크기가 스크롤바가 생긴 만큼 더 작아지는 점을 착안해 예를 들어 상하스크롤이면 scrollWidth와 offsetWidth를 비교하여 같으면 스크롤이 없다고 판단하게끔 처리했습니다. 항상 잘 먹힐지는 모르겠습니다만... 관심 있으신 분들은 적용 함 해보시구요! 조언 가능하신 분 계시면 조언 부탁드리겠습니다,,ㅎ 적용하실 때 저는 이거 다른 도메인에서도 사용할 수 있도록 php로 만들어놓고 헤더에다가 CORS 옵션을 추가했습니다. 코드 자체는 자바스크립트 코드이므로, 해당 코드를 사용하고 싶으신 부분에 (꺾쇠열고)script src="이\_파일\_경로.php"(꺾쇠닫고)(꺾쇠열고)/script(꺾쇠닫고) 로 불러오시면 될 것 같습니다.