스크롤을 내렸을 때 내가 원하는 위치로 조정되는 부드러운 사용성을 경험해 봤을 것이다. 이것은 간단히 css을 활용해 구현이 가능하며 이를 snap scroll이라 부른다. ( 스냅 스크롤 ) snap scroll 모듈을 사용하지 않으면 사용자가 직접 스크롤을 내렸을 때 화면 컨텐츠가 개발자가 생각했던 위치에 정확히 오지 않거나, 화면의 위치를 계속 측정하면서 스크롤을 특정 위치로 옮기려할 경우 많은 js 코드가 소모되기 때문에 snap scroll css을 활용하면 스크롤 조작을 편리하게 사용할 수 있으며, 정확한 정보전달 및 유저의 사용성 향상에 도움된다. Summary 1. 부모와 자식 요소의 height을 동일하게 설정 2. 부모 엘리먼트 css 설정 overflow-y : scroll ; scr..

결 론 ::-webkit-scrollbar { height: 0px; width: 5px; } ::-webkit-scrollbar-thumb { background-color: rgb(170, 165, 165); border-radius: 30px; } 👀 Safari / Chrome 환경에서 동작하는 스크롤은 ::-webkit-scrollbar 을 이용해 CSS 조절이 가능하다. 사진은 CSS를 적용하지 않은 기본 스크롤바 화면으로, 간단한 css 적용을 통해 날씬이로 거듭날 수 있다. Result See the Pen by wkddkdud (@angpeng) on CodePen. 1. ::-webkit-scrollbar _ 스크롤바 전체 영역 조절 ::-webkit-scrollbar { height:..