[CSS/defect] 모바일 팝업에서 스크롤 방지 최적화: AOS와 iOS 이슈 해결 방법 (touch-action: none)

overflow: hidden 대신 CSS의 touch-action: none 속성을 활용해 스크롤 방지를 구현하는 방법에 대해서 알아보겠습니다.

 

웹에서 팝업을 띄울 때, 배경 스크롤을 막는 것은 흔한 UX 요구사항입니다. 이를 위해 보통 overflow: hidden을 사용하지만, 이 방식은 스크롤바를 숨기고 강제로 스크롤을 차단하는 방식이라 사용자 경험에 영향을 줄 수 있습니다. 특히, 모바일 환경에서는 더 섬세한 조작이 필요합니다.

AOS와 iOS 환경에서의 팝업 스크롤 결함

1. AOS 환경에서의 문제

팝업이 열릴 때 overflow: hidden으로 인해 dim 뒤로 보이는 배경이 scrollTop: 0 위치로 초기화되는 이슈가 발생했습니다.

 

2. iOS에서의 문제

overflow: hidden이 적용된 상태에서도 터치 스크롤 이벤트가 실행되는 문제가 있었습니다.

 

위의 문제들을 해결하기 위해, 팝업을 오픈 시 현재 스크롤 위치를 유지하면서 배경을 고정하고, 터치 스크롤을 완전히 방지하는 방법에 대해서 알아봅시다.

 

touch-action: none;

터치 장치에서 사용자가 터치 제스처(스크롤, 줌)를 사용할 때 브라우저가 기본적으로 처리할 동작을 정의합니다. none 값은 터치 동작을 완전히 비활성화하여, 터치 입력이 스크롤을 포함한 모든 기본 동작을 차단합니다.

 

1. HTML

<div class="popupWrap">
    <div class="dim"></div>
    <div class="popupContainer">
      <h2>제목</h2>
      <p>본문</p>
    </div>
</div>

 

2. SCSS

.popupWrap {
    touch-action: none; /* 스크롤 방지 */
    overscroll-behavior: none;
    &.open {
        .dim {
            display: block;
        }
        .popupContainer {
            transform: translateY(0);
        }
    }
    .dim {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 18;
        background-color: rgba(0,0,0,0.8);
    }
    .popupContainer {
        position: fixed;
        bottom: 0;
        left: 0;
        transform: translateY(100%);
        z-index: 19;
        width: 100%;
        background-color: #fff;
        border-radius: 18px 18px 0 0;
        transition: all .3s;
    }
}

 

3. Javascript

const btnPopupOpen = document.querySelector('.btnPopupOpen');
const popupContainer = document.querySelector('.popupContainer');
const dim = document.querySelector('.dim');

function PopupOpen () {
    popupContainer.classList.add('open');
}
function PopupClose () {
    popupContainer.classList.remove('open');
}
    
btnPopupOpen.addEventListener('click', PopupOpen);
dim.addEventListener('click', PopupClose);

 

touch-action: none은 터치 기반 입력(터치스크린, 제스처 등)에 대한 제어만을 담당하기 때문에, PC 환경에서 마우스 스크롤까지 막지는 못합니다. 하지만 PC에서도 마우스 스크롤을 차단하려면 touch-action: none과 함께 다른 CSS 및 JavaScript를 활용해야 합니다.

 

 

 

이렇게 overflow: hidden 대신 CSS의 touch-action: none 속성을 활용해 스크롤 방지를 구현하는 방법에 대해서 알아보았습니다.

 

 

[Git] PR 커밋 해시를 활용한 브랜치 생성 : 쉽고 간단한 가이드

 

[Utility] 구독 없이 바로 사용 가능한 무료 온라인 디자인 툴 : Photopea(포토피아)

 

유용한 터미널 명령어

 

[Javascript] JavaScript로 스크롤 조작하기, scrollTo(), scrollBy(), scrollIntoView()

 

[Server] QuickConnect로 외부에서 서버 접속하는 방법