Skip to content
This repository has been archived by the owner on Jan 8, 2018. It is now read-only.

jindo.m.LayerPosition

Hee Jae Kim edited this page Jan 17, 2017 · 2 revisions

목적

jindo.m.LayerPosition 는 css의 position 프로퍼티의 fixed 속성을 사용하는데 겪게되는 크로스브라우징 문제를 해결하기 위한 컴포넌트입니다. 특정 엘리먼트(Div) 를 뷰포트를 기준으로 상태적인 특정위치에 계속 자리하게 만드는 역할입니다. fixed 가 지원되지 않는 브라우저에서는 absolute 를 이용해서 fixed 와 같이 사용할 수 있도록 합니다. 검토할만한 기능은 다음과 같습니다.

  • vertical 위치(상단, 중단, 하단)를 지정
  • 전체화면 모드
  • 지정된 위치에서 px 단위로 위치 조정
  • setPosition 메서드 호출 시(내부적으로는 resize, scroll, orientationChange 이벤트 발생 시 호출) 이벤트 발생

position: fixed 관련 이슈

현행 모바일 브라우저에서는 fixed 속성지원의 누락 때문에 이슈가 발생하는 브라우저는 없으며 (fixed 속성 커버리지) 안드로이드 2.3 이하 & iOS 7.1에서 fixed 가 제대로 동작하지 않는 문제는 fixed 적용 레이어에 -webkit-backface-visibility: hidden; 를 추가하여 해결할 수 있습니다. 참고

결론

jindo.m.LayerPosition 은 css position: fixed 속성을 제대로 지원하는 브라우저가 적은 시기에 스크립트의 도움을 얻어 레이아웃을 만드는데 사용했던 컴포넌트입니다. 현재는 css의 position:fixed 와 transform 속성만 잘 활용해도 jindo.m.LayerPosition 에서 제공하는 기능들을 현행 플랫폼에서 안정적으로 구현가능합니다. CSS를 이용하여 레이아웃을 구성하는것을 권합니다.

Clone this wiki locally