레이어 팝업 시, 팝업은 스크롤이 되고 부모는 스크롤 되지 않게 하기

Explanation

최근에 안드로이드 앱의 웹 뷰 페이지를 만들던 중 레이어 팝업을 사용할 일이 있었는데, 레이어 팝업 내부에서는 스크롤이 가능하고 부모는 스크롤되지 않게 하던 중에.. 겪은 시행 착오와 해결에 대해 정리해 보려합니다.

예시

우선 간단하게 상황을 테스트 할수 있는 예시 마크업 입니다. 팝업이 뜨고 팝업의 스크롤이 끝나면 부모의 스크롤이 시작됩니다. 여기서 원하는 상황은 팝업의 스크롤이 끝나도 부모(배경)의 스크롤은 되지 않게 하는 것 입니다.

1. 첫번째 방법

흔하게 가장 간단하게 사용하는 방법은 팝업이 뜰때 ‘body’에 css ‘oveflow’ 값을 ‘hidden’ 으로 주는 방법입니다.

하지만 이 방법은 조금만 검색해 보아도, 좋은 밥법이 아니라는 글이 많습니다. 그리고 무엇보다도 안드로이드 웹 뷰에서는 스크롤을 움직이다보면 화면이 어긋나며 누가 봐도 문제가 있는 화면을 보이며.. 전체적으로 부모의 화면 이동이 발생합니다.

2. 두번째 방법

그 다음으로 생각한 방법이 팝업이 뜨기 전에 스크롤의 위치를 기억하고 있다가 팝업이 뜬 후에는 스크롤 이벤트에 팝업이 뜨기 전의 위치로 지속적으로 셋 해주는 방법입니다.

그럴듯한 방법이었지만.. 이 방법 역시 안드로이드 웹 뷰의 환경에서는 스크롤에 대한 이벤트를 웹 뷰와 안드로이드가 함께 받기 때문인지, 최종적으로는 부모의 스크롤 위치가 팝업이 떳을때의 위치로 돌아오기는 하지만 지속적으로 부모의 스크롤이 움직이는 문제가 생깁니다.

3. 세번째 방법

그 다음으로 생각한 방법은 팝업이 떳을때에는 스크롤 이벤트(안드로이드 웹뷰에서 사용하였기 때문에 또는 touchmove)를 ‘event.preventDefault’ 메서드를 사용해서 스크롤(터치무브) 이벤트를 막아버리고 팝업 영역 내의 touchmove의 방향과 이동거리를 계산해서 스크롤 효과를 만드는 방법이었는데, UX적으로 잘 만들려면 터치 무브의 속도를 계산해서 스크롤의 가속도까지 구현해야 하기 때문에..
(이건 마지막 방법으로 남겨두었습니다.)

4. 해결

JSFiddle은 예를 위해 너무 정리 없이 작성해서 대략 중요한 부분만 다시 정리해 보면 아래와 같습니다.

대략 ‘static’이 아닌 ‘position’ 값을 가지고 있는 ‘#popup’ 레이어는 기본적으로 상위의 우선순위를 가지고 있습니다. 그런데 ‘#popup’의 스크롤이 끝난 후 그 밖의 스크롤이 실행되는 이유는 그 밖의 영역이 더 많은 높이의 영역을 가지고 있기 때문입니다. (아래의 그림이 이해에 도움이 될지 모르겠지만…)

해서 위에 수정한 CSS는 기존의 ‘#popup’ 영역 바깥의 영역의 높이 값을 100%로 디바이스(브라우저) 높이와 같게 설정하고 ‘overflow’ 설정을 ‘auto’로 주어 ‘#popup’의 영역보다 더 큰 영역을 갖을 수 없도록 하여 스크롤이 영향을 받지 않도록 한 것입니다.

조금 더 적어보자면.. 전에는 ‘body’가 컨테이너의 역할로 document의 높이 값을 가지고 있어서 ‘#popup’ 영역 외에서도 스크롤이 발생하는 것이고, 수정 후에는 ‘#page-content’의 영역을 디바이스의 높이로 하는 컨테이너 역할을 하게 되어 ‘#popup’ 이상의 영역을 갖지 않아 스크롤이 생기지 않습니다.

Leave a Reply

  1. […] Select Box – CSS 효과주기 […]

  2. 김지현

    셀렉트 박스 펼침이 됐을떄 검정테두리가 두껍게 생기는데…그걸 제어하는 방법은 없을까요??

    1px로 흐리게 하고 싶다면 어떻게 해야하나요…펼칩목록에…

    • 안녕하세요, 제가 확인이 늦었네요.
      말씀하신 부분이 정확하게 어떤 부분인지 잘 모르겠네요..
      셀렉트 박스가 펼쳐졌을때에는 기본적으로 스타일이 들어가지 않는 것으로 알고 있습니다.
      해당 상황을 확인해야 정확하게 알 수 있을것 같습니다 ~

  3. 1029

    감사합니다 이 글은 꼭 지우지 말아주세요…

    • 댓글 남겨주셔서 감사합니다 :)

  4. kelly

    이거…한화면에 셀렉트가 많을때는 어떻게 사용하면될까요^^;;

    • 안녕하세요,
      지금은 간단한 이해를 위해 id를 선택자를 주었는데요, html과 css모두 class로 바꾸고 스크립트 부분을
      var select = $(“.color”);
      이런식으로 바꾸시면 될거 같습니다 :D

  5. 라떼9

    다른 글들은 봐도 이해안됬었는데, 이 글은 너무나 쉽게 이해가 쏙 되네요ㅠㅠ
    select 박스때문에 헤매고 있었는데 고맙습니다!! ^^

    • 이 글이 도움이 되었다고 하시니 저도 너무 기분이 좋아요ㅎ
      이렇게 댓글까지 남겨주셔서 제가 더 감사해요 ^^

  6. 젤조

    select option 디자인적용도 가능할까요? option의 padding이나, 마우스오버될때 효과를 넣고 싶은데 css만으로 가능한지 질문드립니다.
    select option{height:33px;font-size:14px;line-height:33px;color:#777;padding:10px;background-color:#f6f6f6;} 이렇게 적용시켰더니 font-size, color, background-color는 적용이 되는데 height,padding,line-height 속성은 적용이 안되네요.

    • 안녕하세요? 기본적으로 select option 에는 스타일 적용이 안된다고 생각하는게 좋을거 같아요. 브라우저나 os에 따라서 적용에도 차이가 있으니까요,
      보통은 스타일을 꼭 주어야한다면 다른 요소(li, div…)로 드롭다운 메뉴를 만들어서 셀렉트 기능을 대신해서 사용하는게 좋을꺼 같아요 :D

  7. yhoomor

    잘 활용하여 사용하겠습니다.
    정말 유용한 내용이었어요.
    감사드려요 ^^

    • 도움이 되었다니 다행이에요 :D
      이 댓글 때문인지 오늘 하루가 좋았던거 같아요, 감사합니다 ~

  8. 안녕하세요.. ie8에서 하니 깨지는 현상이 발생하네요 ㅠㅠ

    • 안녕하세요? 확인해보니 실수로 select태그에 css속성 ‘filter: alpha(opacity=0);’ 을 주지 않았네요. 죄송합니다…
      지금은 수정하였습니다. 다시 한번 확인해보시고 안되시면 다시 댓글 남겨주세요.
      댓글 남겨주셔서 감사합니다! :D

  9. 김한솔

    Cheolguso님 답변감사합니다. selectbox모양으로 태그를 이용하여 비슷하게 만드는 것 외에는 아직 안되는것이군요.. ㅜㅜ

    • 더 도움이 되어 드리지 못해 아쉬움이 남네요…
      김한솔님, 새해 복 많이 받으시고 하시는 일 좋은 일만 가득하시길 바랄게요 ~

  10. 김한솔

    안녕하세요^^ 덕분에 겨우 selectbox를 수정했습니다. 정말감사합니다.
    그런데 혹시 option 같은경우도 수정할수 있을까요??

    • 안녕하세요? 첫번째 댓글이네요. 이렇게 댓글 남겨주셔서 감사합니다 :D
      우선. option 요소에는 css 속성이 적용되지 않는 것으로 알고 있습니다. 하고자 한다면 select & option 태그를 사용하지 않고 다른 태그(div, ul, li..)를 사용하여 비슷하게 만들 수 있겠지만 모바일 디바이스에서 select 기능을 사용하지 못하게 되니 UX적으로도, 스크린리더기를 통한 접근성에도 좋지 않은 방법이 되리라 생각이 듭니다.
      차후에 더 나은 select box 스타일링 방법을 찾게되면 다시 포스팅 하도록 하겠습니다.