Summary 1. js 코드 function handleScroll() { const elements = document.querySelectorAll('.on-screen'); elements.forEach(element => { if ( element.getBoundingClientRect().y > window.innerHeight ) { // 각 요소의 위치와 스크린 높이 비교 // css 스타일에 변화 적용 element.style.opacity = "0"; element.style.transform = 'translateY(70px)'; } else { element.style.opacity = "1"; element.style.transform = 'translateY(0px)'; } })..

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