다음 우편번호 검색 필드 터치 시 스크롤업되는 문제 해결

다음 우편번호 검색 API를 이용중에 폰에서 테스트를 하는데 문제 발생.

오류 내용 : 검색 필드 터치하여 키보드 UI가 나오면 화면이 상단으로 이동한다. 자동으로 스크롤이 올라간다.

API 가이드 페이지에도 얼마전부터 표기되어있다.

iframe을 이용하여 레이어 띄우기

모바일웹에서는 팝업을 띄우는게 부담스러울 수도 있으니, 아래 코드와 같이 특정 element에 크기를 지정하여 iframe으로 끼워넣는 방식을 이용할 수도 있습니다. 아래 ‘우편번호 찾기’ 버튼을 클릭해서 바로 확인해보세요.
(현재 iOS 8.x Safari브라우저에서 레이어를 띄운 후, input필드를 터치하면(키보드 또는 액션시트가 올라올때) position:fixed된 엘리먼트가 페이지의 최상단으로 올라가는 버그가 있습니다. 해당 샘플 코드를 이용하시는 분들께서는 자신의 페이지에 맞게 위치값을 조정하시여 사용하시길 권장합니다.)

 

혼자 고민고민하다가 해결법 찾았다!

execDaumPostcode() 내에 initLayerPosition() 아래 부분에 아래 코드 추가.

var zipcode_top = $("#layer-zipcode").offset().top;
$("#layer-zipcode").css({
"position" : "absolute",
"top" : zipcode_top,
});

우편번호 검색 창 위치 조정이 된 후에 position top 값을 가져와서 absolute position 값으로 할당한다.

closeDaumPostcode() 내에 마지막에 아래 코드 추가.
$("#layer-zipcode").css("position", "fixed");
position을 처음 할당되었던 fixed 값으로 재설정.