javascript를 이용해서 화면 회전간에 화면의 특정 위치에 머물러있게 하는 방법

데스크톱 브라우저의 화면 너비가 변하거나, 휴대폰 브라우저의 화면이 회전하는 경우, 화면에 나타나는 부분은 내가 보고있던 내용과 무관한 경우가 허다하다.

이런 문제를 해결하려면 화면의 너비가 달라지더라도 직전에 보고있던 부분이 화면안에 나타나도록 처리를 해야 한다.




1. 화면의 가로 스크롤 위치를 저장하는 변수를 둔다.

  var sy;

2. scroll 이벤트가 발생할때마다 그 변수를 업데이트시킨다.

  $(window).scroll( function(){
    sy = $(window).scrollTop() / $(document).height();
  });

3. 화면의 너비가 변화시켜 레이아웃을 유발하는 이벤트가 발생하면, 그 변수를 활용해서 적절한 위치로 스크롤 시킨다.

  $(window).on('orientationchange resize', function(){

    $(window).scrollTop( $(document).height() * sy );

  });