CSS 스크롤 막기 - CSS seukeulol maggi

Question

반응형

목차 Show

지짱이야기
풀페이지 팝업시 뒤에 스크롤 안되게 하기 자바스크립트

문제 현상

스크롤 바와 스크롤 기능이 없어야 하는 페이지(또는 div)인데, 뜬금없이 있어서 이를 없애려고 한다.

(스크롤 바가 없어짐과 동시에 스크롤 기능도 없어진다.)

해결 방법

해당 body(또는 div)에 style="overflow:hidden;"

해당 body(또는 div)에 style="scroll:no;"

참고

-

반응형

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

'컴퓨터 공학 > HTML, CSS' 카테고리의 다른 글

[웹개발] body 태그 아래 가 생기는 현상 (0)	2021.06.13

지짱이야기

블로그 내 검색

관리
글쓰기
로그인
로그아웃

홈
태그
방명록

퍼블리셔일기

풀페이지 팝업시 뒤에 스크롤 안되게 하기 자바스크립트

by 지짱히메 2021. 4. 1.

반응형

go_view 를 클릭하면 body 를 얼려버립니다

close를 클릭하면 다시 body가 풀어집니다

$('.go_view').click(function(){

$('.pop_up').stop().fadeIn();

// $('body').addClass('fixed');

$('body').on('scroll touchmove mousewheel', function(event) {

event.preventDefault();

event.stopPropagation();

return false;

});

$('.close').click(function(){

$('.pop_up').stop().fadeOut();

// $('body').removeClass('fixed');

$('body').off('scroll touchmove mousewheel');

});

반응형

'퍼블리셔일기' 카테고리의 다른 글

스와이퍼 버튼 누르면 비디오 멈추기 swiper video stop pause (0)	2022.03.03
button click selected option change 버튼 클릭시 옵션 체크 변경 (0)	2021.10.27
이미지 첨부 미리보기 파일이미지 만들기 html,css, js (0)	2021.03.04
css로만 텍스트 애니메이션 부드럽게 주기 슬라이드와함께 효과 (팁) (0)	2021.02.03
반응형 헤더/메뉴 만들기 responsible header nav menu css html (0)	2021.02.03

댓글0

비밀글

이전 1 ··· 8 9 10 11 12 13 14 15 16 ··· 23 다음

모바일 레이어 팝업 부모창 스크롤 막기

CSS 속성 중에 overflow 는 컨텐츠의 크기가 요소의 크기보다 커서 넘칠 때 어떻게 보여줄지 지정하는 속성이다.

이를 이용하여 body 태그에 width: 100%; height: 100%; overflow: hidden을 주게 되면 내부 스크롤은 살리면서 외부 스크롤 기능은 막을 수 있다.

그러나 iOS 환경에서는 body 태그에 overflow:hidden 속성이 반영되지 않았다.

모바일은 항상 iOS가 속 썩이는 듯 -,-

대신 touch-action:none 속성을 넣어 터치 이벤트를 비활성화했다.

코드 자체는 간단해서, 자주 쓰는 레이어 팝업과 같이 만들어봤다.

HTML

<a href="#" class="btn">1번 버튼</a>
<a href="#" class="btn">2번 버튼</a>
<a href="#" class="btn">3번 버튼</a>
<a href="#" class="btn">4번 버튼</a>
<a href="#" class="btn">5번 버튼</a>

<div class="pop_wrap">
    <div class="bg"></div>
    <div class="popup">
        <a href="#" class="close"><img src="images/close.png" alt="닫기"></a>
        <div class="popup_con">
            컨텐츠<br>
            컨텐츠<br>
            컨텐츠<br>
            컨텐츠<br>
            컨텐츠<br>
            컨텐츠<br>
            컨텐츠<br>
            컨텐츠<br>
            컨텐츠<br>
            컨텐츠<br>
            컨텐츠<br>
            컨텐츠
        </div>
    </div>
</div>

CSS

/* 스크롤 막기 CSS */
.notScroll {overflow: hidden;width: 100%;height: 100vh;touch-action:none;}
/* 팝업 CSS */
.btn {display: flex;justify-content: center;align-items: center;width: 300px;height: 300px;margin: 0 auto 30px;background: #ade9ff;font-size: 16px;text-decoration: none;color: #000;}
.pop_wrap {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100vh;z-index: 3;}
.pop_wrap .bg {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: rgba(0,0,0,0.8);z-index: 1;}
.popup {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 280px;height: 280px;max-width:90vw;max-height: 90vh;background: #fff;z-index: 2;}
.popup .close {position: absolute;top: 15px;right: 15px;width: 17px;height: 17px;}
.popup .close img {width: 100%;height: 100%;}
.popup .popup_con {overflow: auto;padding: 15px;width: 100%;height: 100%;font-size: 16px;line-height: 24px;color: #000;}

레이어 팝업과 활성화시켜줄 버튼을 만들었다.

모바일의 상 · 하단 바의 영역까지 포함하기 위해 height 값을 vh 단위로 바꿨다.

JS

$(document).ready(function(){
    popup();
})

function popup(){
    //팝업 열기
    $('.btn').on('click',function(e){
        e.preventDefault();
        $('.pop_wrap').fadeIn(300);
        $("body").addClass('notScroll');
    })

    //팝업 닫기
    $('.pop_wrap .bg, .pop_wrap .close').on('click',function(e){
        e.preventDefault();
        $('.pop_wrap').fadeOut(100);
        $("body").removeClass('notScroll');
    })
}

팝업을 열 때 body 태그에 notScroll 클래스를 추가하여 외부 스크롤을 막는 CSS 속성을 추가했다.

제일 간단한 방법이지만, iOS 12 (iPhone 6) 이하 버전에서 touch-action:none; 속성이 반영되지 않는 단점이 있다.

대체 방법으로 현재 notScroll 클래스에 position:fixed 속성을 추가하여 화면 영역의 위치를 고정시키는 방법이 있는데, 이게 또 최신 버전에서는 하단 바 영역이 포함되지 않는 버그가 있었다.

iOS 15버전 fixed 영역 버그

iOS 버전 검사를 통해 예외 처리를 해주면 될 것 같은데, iOS 12 버전 점유율이 낮은 편이기도 하고 테스트 기기도 없어서.... 나중에 테스트를 하게 된다면 추가해 봐야겠다.

[ DEMO ]