웹 페이지에 접속했을 때 등록된 콘텐츠가 화면에 보이는 것보다 많다면 스크롤바를 내려서 확인할 수 있다. 컴퓨터라면 마우스 휠이나 키보드 방향키 또는 스크롤바를 직접 마우스 왼쪽 클릭한 채로 내리면 되고 모바일은 손으로 화면을 아래로 내리면 된다.
웹페이지나 블로그를 개설한 다음 화면에 콘텐츠가 많아지면 특별한 설정을 하지 않아도 위처럼 화면 오른쪽에 스크롤바가 자동으로 생성된다.
만약 웹사이트/블로그 설정 등에 따라 스크롤바 기능은 유지하면서 막대 모습을 감추려면 간단한 CSS 설정으로 해결할 수 있다.
1. 스크롤바 모두 감추기
예를 들면 워드프레스에 GeneratePress 테마를 적용한 다음 오프 캔버스를 만들었을 때, 스크롤바가 두 개 생성될 것이다. 하나는 사이트 본문 막대이고 나머지는 오프 캔버스의 막대인데 나란히 두 개가 있는 모습이 보기에는 썩 좋지 않다.
스크롤바 감춤 설정을 위해서는 먼저 워드프레스 대시보드 – 디자인 Customize – Additional CSS 접속이 필요하다.
* 적용 중인 테마에 따라 CSS 입력 창 진입 경로가 다를 수 있습니다.
::-webkit-scrollbar {
display: none;
}
CSS 창 비어있는 아무 곳에 위의 코드를 입력하면 블로그 내 전체 스크롤바를 감출 수 있다. 위 사진을 보면 코드 입력 후 오프 캔버스에 2개나 보이던 스크롤 막대가 모두 사라진 것이 보인다.
2. 본문 스크롤바만 감추기
body::-webkit-scrollbar {
display: none;
}
조금 전 코드 앞에 ‘본문’을 뜻하는 ‘body’를 추가하면 본문 스크롤바를 감출 수 있다. 코드를 잘 넣으면 오프 캔버스 스크롤바만 남을 것이다.
3. 오프 캔버스 스크롤바만 감추기
이번에는 반대로 본문은 그대로 두고 오프 캔버스의 스크롤바만 감추는 방법을 알아보자. 우선 CSS에 입력할 정확한 클래스 이름 확인을 위해 F12 개발자도구 창을 열고 요소를 검사한 다음 이름을 확인하면 된다.
1. 개발자도구 창 왼쪽 위의 점선 화살표 모양 마우스 왼쪽 클릭
2. 오프 캔버스 안의 스크롤바 마우스 왼쪽 클릭
3. 개발자도구 창 중간에 나오는 이름 확인 (각 이름 위에 마우스를 올렸을 때 스크롤바 영역이 활성화되는지 확인)
검사 결과 유효한 오프 캔버스 스크롤바에 해당하는 이름은 아래와 같았다. (글씨가 흐릿한 회색인 곳은 제외)
① .offside–right.is-open:not(.slideout-transition)
② .slideout-navigation.main-navigation
③ .offside-js–interact .offside
이 중 원하는 이름을 선택하고 바로 뒤에 아래 코드를 붙이면 된다.
::-webkit-scrollbar {
display: none;
}
(예시)
.slideout-navigation.main-navigation::-webkit-scrollbar {
display: none;
}
코드를 바르게 입력하면 오프 캔버스 스크롤바만 사라지는 것을 볼 수 있다. 단 워드프레스에 적용 중인 테마나 블로그 플랫폼에 따라 클래스 이름은 달라질 수 있으니, 꼭 개발자 검사를 통해 정확한 이름을 확인하는 것이 좋다.
또한 모든 작업을 마쳤다면 테마에 따라 CSS 창 위의 발행, 저장과 같은 버튼을 눌러야 블로그에 적용할 수 있다.
관련 글
GeneratePress 헤더 오프캔버스 카테고리 설정 방법 안내
GeneratePress 오프 캔버스 사이드바 똑같이 적용하는 방법
