오버레이 팝업창에서 스크롤할 때 바닥에 가려진 본문의 스크롤 기능을 일시 정지시키는 방법입니다. 본 블로그에 적용한 것이므로 다른 사이트에 사용할 경우 약간의 수정 과정이 필요합니다. 이런 방법도 있구나 하는 정도의 내용입니다.
.mobile-menu {
overflow: hidden;
height: 100%;
}
#dimmed {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
}
티스토리 북클럽 스킨의 "style.css"에 담겨 있는 코드입니다.
- 모바일 접속하여
- 메뉴 버튼을 눌러서 "aside" 팝업창을 열게 되면,
① 먼저, 본문 페이지 body의 상하 폭("height")을 "100%"로 변경하고,
② body에 ".mobile-menu" 클래스를 추가하여,
③ 화면을 벗어나는 내용("overflow")을 가리고("hidden"),
④ 본문의 상하 스크롤 기능을 정지시킵니다.
⑤ 상하 폭 100%에 "overflow: hidden"가 추가되어 본문의 상항 스크롤바가 사라집니다.
이제 aside 팝업창을 스크롤 할 때, 본문도 따라 스크롤하지 않고 정지된 상태를 유지합니다. 덧붙여, 본문(body)과 팝업창(#aside) 사이에 불투명도 60%의 반투명 가림막("#dimmed")을 집어넣습니다.
이러한 팝업창 기능을 PC 화면에서 사용하고 있습니다. 검색 기능을 제공하는 검색창과, 블로그에 담긴 내용을 리스트로 제공하는 메뉴창이 그것들입니다.
PC 팝업창 아래 본문에 스크롤 정지 기능 적용
PC 화면에서 마우스가 위치한 요소에서만 스크롤이 가능하도록, jQuery의 'hover()' 마우스 이벤트를 사용하여 aside 팝업창에 마우스를 올리면 body의 스크롤 기능이 정지하게 만들었습니다.
단 dimmed 가림막은 사용하지 않습니다. 팝업창을 띄우더라도 본문의 내용을 보기 위한 목적입니다.
// script.js
$("*[id^='aside']").each(function() {
$(this).hover(function() {
document.body.classList.add('pin');
}, function() {
document.body.classList.remove('pin');
});
});
/* style.css */
body.pin {
overflow: hidden;
height: 100%;
}
팝업창 aside-1과 aside-2 위로 마우스를 올리면 body에 클래스 pin을 추가하고, 마우스를 팝업창 밖으로 이동하면 pin을 제거하는 코드입니다. 팝업창이 2개라서 코드가 지저분해졌습니다.
프레임 변동 문제 발생
① body에 'overflow: hidden' 속성을 부여하니까 팝업창을 띄우면 body의 스크롤바가 사라집니다.
② 스크롤바가 사라진 여유 공간으로 body의 가로 폭이 늘어나면서 본문의 내용을 다시 렌더링 합니다.
③ 'position: fixed' 설정한 팝업창이 스크롤바가 사라진 공간 위로 이동합니다.
Google PageSpeed Insights와 SEO에서 싫어하는 페이지 변동 요소입니다. 급격한 위치 변동이 눈을 어지럽히고 내용을 다시 렌더링 하는 것 때문에 접속 기기의 리소스를 낭비하게 됩니다.
팝업창과 본문에 padding과 margin 추가하여 문제 해결
※ 스크롤바의 폭(width)은 4픽셀
(하단에 설명)
본 블로그에서는 스크롤바의 폭을 4픽셀로 고정하였습니다. 거의 모든 사용자가 휠이 장착된 마우스를 사용하고, 모바일에서는 터치 스크린이 대신하기에, 스크롤바의 폭은 줄여도 괜찮다는 생각입니다.
(이것을 개선하기 위하여 마우스를 스크롤바 위로 이동하면 폭이 넓어지는 기능을 사용하는 사이트도 있습니다.)
body.pin {
padding-right: 4px;
overflow: hidden;
height: 100%;
}
body.pin [id^="aside"] {
margin-right: 4px;
}
① 팝업창에 마우스가 올라가면(hover) body의 스크롤바가 사라지므로 그 위치에 4픽셀의 padding을 추가하였습니다.
padding-right: 4px;
② 팝업창이 스크롤바가 사라진 공간으로 이동하는 것을 막기 위하여 팝업창 오른쪽에 4픽셀의 margin을 추가하였습니다.
margin-right: 4px;
스크롤바의 폭(width)을 4픽셀로 제한하는 코드
웹브라우저 호환성을 위하여 여러 가지 코드를 섞어서 사용합니다. 현재 스크롤바의 외형 변경이 표준 기능으로 확립된 것이 아니기에 구글에서 다양한 방법을 공부하면서 변경 중입니다.
body {
scrollbar-width: thin;
scrollbar-color: black transparent;
}
body::-webkit-scrollbar {
width: 4px;
height: 4px;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch;
}
body::-webkit-scrollbar-thumb {
background-color: black;
}
body::-webkit-scrollbar-track {
background-color: transparent;
}
[id^="aside"] {
overflow-y: scroll;
scrollbar-width: thin;
scrollbar-color: red transparent;
}
[id^="aside"]::-webkit-scrollbar-thumb {
background-color: red;
}
[id^="aside"]::-webkit-scrollbar-track {
background-color: transparent;
}
댓글