탐구하는 취르미

팝업을 화면 중앙에 띄우는 방법은 매우 직관적이지만, 스크롤 위치에 따라 팝업의 위치가 달라져야 할 때는 조금 더 신경을 써야 합니다. 이번 포스팅에서는 스크롤 위치에 맞춰 팝업을 화면 중앙에 띄우는 방법을 자바스크립트를 이용해 구현하는 방법을 알아보겠습니다.  팝업(popup) CSS팝업을 화면 중앙에 띄우는 기본적인 스타일입니다. transform: translate(-50%, -50%);는 팝업의 크기에 관계없이 정확히 중앙에 배치되도록 해줍니다..popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; width: 300px; height: 200px; ..

overflow: hidden 대신 CSS의 touch-action: none 속성을 활용해 스크롤 방지를 구현하는 방법에 대해서 알아보겠습니다. 웹에서 팝업을 띄울 때, 배경 스크롤을 막는 것은 흔한 UX 요구사항입니다. 이를 위해 보통 overflow: hidden을 사용하지만, 이 방식은 스크롤바를 숨기고 강제로 스크롤을 차단하는 방식이라 사용자 경험에 영향을 줄 수 있습니다. 특히, 모바일 환경에서는 더 섬세한 조작이 필요합니다.AOS와 iOS 환경에서의 팝업 스크롤 결함1. AOS 환경에서의 문제팝업이 열릴 때 overflow: hidden으로 인해 dim 뒤로 보이는 배경이 scrollTop: 0 위치로 초기화되는 이슈가 발생했습니다. 2. iOS에서의 문제overflow: hidden이 적..

scrollTo(), scrollBy(), scrollIntoView() 메서드를 활용해 스크롤 조작하는 방법에 대해서 알아보겠습니다. scrollTo() 이동할 좌표값을 받아 절대적인 위치로 스크롤을 이동시킵니다. window.scrollTo(x좌표, y좌표); scrollTo() 예시 //문서의 상단으로 스크롤 이동 window.scrollTo(0, 0); //문서의 200px 위치로 스크롤 이동 window.scrollTo(0, 200); //문서의 300px, 500px 위치로 스크롤 이동 window.scrollTo(300, 500); scrollBy() 이동할 좌표값을 받아 현재 위치에서 상대적인 위치로 스크롤을 이동시킵니다. window.scrollBy(x좌표, y좌표); scrollBy()..