모달 팝업 부모창 스크롤 - modal pab-eob bumochang seukeulol

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');
  }
};

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

coding/html, css

by 코딩하는 갓디노 2021. 9. 6.

모달창(팝업) 오픈시

css를 통한

스크롤 방지입니다.

css를 이용한 scroll을 방지

• 모달창이 오픈되었을때, 감싸고 있는 부모요소에 아래의 스타일을 적용하면 됩니다.
• 모달창 open이 true시 적용하고,  false시 없애주어 scroll 기능을 되살려줍니다.

.wrapper = {
  position: fixed;
  width :100%;
  height: 100%;
  overflow: hidden;
}

저작자표시비영리변경금지

'coding > html, css' 카테고리의 다른 글

태그

js 스크롤 방지, react 스크롤방지, scroll prevent style, scroll 막기, scroll 방지, scroll 방지 css, 모달창 스크롤방지, 스크롤 방지, 팝업시 스크롤 방지

관련글

• 
  [css] loading bar css with tailwind, 로딩이 필요한 경우 (ft. tailwind)
• 
  [css] grid 반응형 layout 적용
• 
  [css] 이미지 애니메이션 효과 (ft. 무한 회전, 사라지기, 출현하기)
• 
  [html ] data- 속성 (ft. dataset, data-key, data property)

댓글0

비밀글

이전 1 ··· 104 105 106 107 108 109 110 111 112 ··· 321 다음