body 스크롤 자체를 없애버리기

요청사항 중에 내부 팝업을 띄울거고 내부 팝업이 활성화되어 있을때는 바디 스크롤이 움직이지 않았으면 좋겠다고 했을 때 단순히 overflow-y: hidden으로 처리하면 되겠다 생각하고 실제 그렇게 처리하여 전달했다. 그런데 기획/디자인에서 내부 팝업을 띄울때마다 뒤에 바디가 움직이는 것처럼 보이는게 보기 싫다고 해결을 원했다.
무슨 소린가 하고 봤더니 overflow-y: hidden으로 인해 브라우저 스크롤 자체가 없어져버려 해당 부분만큼 바디 넓이가 확장되면서 움직이는 것처럼 보이는 것이었고 브라우저별로 스크롤 각각의 넓이가 다르니 임의로 그 공간만큼 채우는 형식으로는 불가능하여 어려울 것 같은데 고민 해보겠다고 하고 여러가지 시도하기 시작. 하지만 마우스 스크롤 이벤트에 event.target같은 요소가 없어서 이게 어디 위에서 스크롤 하는지도 알 수 없고 애매했다.

body 스크롤 자리도 남기면서 막기

그러다 기획자가 페이스북 데스크톱에서 사진을 볼 때 스크롤 넓이는 살아 있으면서 바디 스크롤이 되지 않는다고 알려주어 접속해서보니 굳이 코드를 보지 않아도 고민을 많이 해서 그런지 어떻게 했는지 딱 보였다. 바디에 overflow-y: scroll로 강제로 스크롤 너비는 유지시키고 본문 자체에서는 스크롤 자체가 생기지 않도록 처리하기.

바로 시도. body나 전체를 감싸는 container가 있다면 그 부분을 position: fixed 처리하고 scroll 위치 만큼 음수값으로 top에 지정하는 형태, 그리고 다시 되돌릴때는 top에 지정한 음수값을 양수값으로 바꿔서 스크롤 위치로 돌려주면 됨.

var scroll = {
  disable: function() {
    $('body')
      .css('overflow-y', 'scroll');

    $('.container').css({
      'position': 'fixed',
      'top': -$(win).scrollTop(),
      'left': 0,
      'width': '100%'
    });
  },
  enable: function() {
    var scrollPosition = Math.abs($('.container').css('top').split('px')[0]);

    $('.container').removeAttr('style');
    $(window).scrollTop(scrollPosition);
    $('body').removeAttr('style');
  }
};

잘된다. 페이스북 이 똘똘이들.