질문/조언질답게시판
Extra Form
PHP PHP 7.4
CMS Rhymix 2.x

 

오늘도 조언을 구해봅니다! 오늘은 css 관렵입니다^^;

일단 위 URL에서 첫번째 항목의 "모범답안" 버튼을 눌러야 문제의 화면이 나옵니다.

아 그리고 브라우저폭이 769 이상이어야 됩니다 (반응형)

 

1. div. model_answer_head 를 모달창 상단에 고정하고 싶습니다. 

position: fixed;로 넣으면 쉽겠지! 했는데 모달창이 통째로 움직이면서 올라가버립니다.

 

modal window.PNG

 

2. 엇 그런데 스크롤이 안됩니다. 왜냐하면 뒷배경 스크롤 금지를 걸어놨는데, 

js에서 div#content 의 스크롤을 제한 하는데, 모달창내 스크롤도 움직이질 않아요.

뒷배경 스크롤 금지를 유지한채 모달창은 내 스크롤은 허용하고 싶어요.

해당 js 내용은 아래와 같습니다.

 

jQuery('div#content').on('scroll touchmove mousewheel', function(event) {

        event.preventDefault();

        event.stopPropagation();

        return false;

    }); 

 

조언을 구해봅니다!

 

  • profile

    1번은 div.model_answer_head 가 position 값이 fixed가 되면 해당 fixed된 모달 영역만큼 그 공간은 빈공간으로 인식하게 됩니다. 그래서 2번째 내용이 존재하는 항목이 위로 올라오게 되는거지요.

    model_answer_head 에 fixed을 주었다 하더라도 결론적으로 해당 모달창안에 있는 내용들은 자체적인 브라우저가 아닌 고정된영역이 상단 위 스크롤 부분 부터 아래까지 전반적으로 모두를 출력하게 되어있는 상태이지요..

    model_answer_wrap 에 스크롤 옵션을 주지 말고 model_answer_head 에 position fixed옵션도 빼버리신다음 하단 콘텐츠 영역에 스크롤옵션 주시면 될듯합니다.

     

    2번 질문의 스크롤옵션은 디버깅 안해봐서 저두 잘 모르겠습니다.

  • profile profile
    와 정말 감사합니다! 설명도 이해하기 쉽게 알려주셔서 감사해요!
  • profile
    1번은 @람보님 설명대로 해결하고,
    2번은
    위 스크립트대신

    function lockScroll(){
    var offset = jQuery(document).scrollTop();
    jQuery("body").css({"position":"fixed","top":-offset});

    }

    function unLockScroll(){
    var offset = jQuery("body").offset().top;
    jQuery("html,body").css("position","static").scrollTop(-offset);

    }

    이 스크립트를 사용하니까 해결되었습니다! 뿌 투 더 듯