상세팝업창의 추가내용이 길어지면서 스크롤바를 적용시키기로 결정했고
스크롤바에 대한 공부를 하게 되었다. 본 글은 스크롤-바Scrollbar-꾸미기-속성-총정리를 참고하여 정리했다.
스크롤바는 커스텀하여 스타일링 할 수 있지만
스크롤바 요소는 웹 콘텐츠가 아닌 브라우저 내부 인터페이스로 취급되기 때문에 일반적인 css 사용에 있어 기능이 제한적인 것이 많다. css 를 적용하여 간단한 스크롤바의 색깔이나 두께를 변경 할 수는 있지만 복잡한 스타일링은 제한적이다.
특히 유의해야 할 점은 CSS scrollbar 관련 선택자들은 표준이 아니기 때문에 브라우저 마다 문법 적용이 다르다는 점이다. 대체적으로 두가지 양식으로 나뉘는데, WebKit기반 브라우저(Chrome, Edge, Opera, Safari, iOS 브라우저) 와 IE와 파이어폭스 브라우저로 나뉜다.
이 중 WebKit 브라우저 스크롤바 에 대해 알아 보겠다.
🎈 1. webkit 브라우저 스크롤바의 속성
- ::-webkit-scrollbar : 스크롤바 전체
- ::-webkit-scrollbar-thumb : 드래그 가능한 스크롤 핸들 막대
- ::-webkit-scrollbar-track : 스크롤바 트랙 (스크롤이 움직이는 영역 / 스크롤 진행률 표시줄)
- ::-webkit-scrollbar-button : 스크롤바의 방향 버튼 (= 위/아래 표시 화살표)
- ::-webkit-scrollbar-track-piece : 스크롤 진행률 표시줄에서 스크롤 핸들 막대 부분을 제외한 남은 빈 공간
- ::-webkit-scrollbar-corner : 수평/수직 스크롤 막대가 만나는 스크롤 막대의 하단 모서리
- ::-webkit-resizer : 요소의 하단 모서리에 나타나는 크기 조정 핸들
- ::-webkit-scrollbar 선택자에 대해선 IE와 파이어폭스 제외한 주요 최신 브라우저 모두 지원한다고 보면 된다. 사람들이 가장 많이 사용하는 브라우저를 뽑는다면 크롬과 엣지, 웨일 일테니 스크롤바를 스타일링 할 경우가 생길경우 왠만하면 이 속성을 이용하면 된다.
/* Chrome, Whale, Edge */
/* 스크롤바 전체 기본 꾸미기 */
body::-webkit-scrollbar { /* 커스텀 스크롤바 스타일링을 하겠다는 기본 속성 이다. 이 설정이 없으면 다른 모든 것은 비활성화 된다. */
width: 10px; /* 세로축 스크롤바 폭 너비 */
height: 20px; /* 가로축 스크롤바 폭 너비 */
}
}
/* 스크롤바 막대 꾸미기 */
body::-webkit-scrollbar-thumb {
background: rgba(220, 20, 60); /* 스크롤바 색상 */
border-radius: 10px; /* 스크롤바 둥근 테두리 */
}
/* 스크롤바 트랙 꾸미기 */
body::-webkit-scrollbar-track {
background: rgba(220, 20, 60, .1); /*스크롤바 뒷 배경 색상*/
border: 2px solid #9b6a2f; /* 스크롤바 막대 테두리 설정 */
border-radius: 12px 12px 12px 12px;
}⭐ 이때 중요한건!! 요소 영역이 스크롤링 기능을 사용하도록 지정하는 것이다.
.body{overflow-y: scroll;}🎈 2. 스크롤를 원하는 위치에 놓기
예를 들어 상세 팝업을 닫은 후 다시 다른 상세 팝업을 클릭할 경우 원 위치 시키지 않으면 마지막 스크롤바위치에 설정되게 된다.
그래서 상세 팝업 닫을 시 초기화 하는 방법으로 제이쿼리 scrollTop() 를 이용했다.
📍 2-1. scrollTop()
-
선택한 요소의 세로 스크롤 막대 위치를 설정하거나 반환한다.
-
위치를 반환하는데 사용하는 경우 일치하는 첫번째 요소에 대한 스크롤 막대의 세로 위치를 반환한다.
$(selector).scrolltop()- 위치를 설정하는데 사용하는 경우 모든 일치 요소에 대해 스크롤 막대의 위치를 설정한다.
$(selector).scrollTop(position)
// position: 숫자 입력- 적용 : $(selector).scrollTop(0) 으로 하여 상세팝업을 열때마다 상단에 위치 하도록했다.
📍 2-2. 세로 스크롤 중간을 특정 div/id로 이동-offset()
문서를 기준으로 선택한 요소의 좌표를 설정, 반환한다.(절대 좌표)
절대좌표: 브라우저 창 또는 문서 전체를 기준으로 나타내는 좌표값
절대좌표를 기준으로 원하는 위치로 이동 할 수 있다.
var offset = $(selector).offset();
$('.window').animate({scrollTop: (offset.top - $('.window').height() / 2)}, 500);- offset()을 반환하는데 사용하는 경우
$(selector).offset() // top과 left의 거리를 반환 (Object로)
$(selector).offset().top // 맨 위에서부터 selector가 위치한 거리를 반환
$(selector).offset().left // 맨 왼쪽에서부터 selector가 위치한 거리를 반환- offset()을 설정하는데 사용되는 경우
/* 좌표설정 */
$(selector).offset({top: value, left: value})
// 맨 위 및 왼쪽 좌표를 픽셀 단위로 지정한다.
$(selector).offset({top: value})
// 맨 위의 좌표를 픽셀 단위로 지정한다.
// 절대 좌표를 기준으로 위에서 value만큼 이동시킴
$(selector).offset({left: value})
// 맨 왼쪽의 좌표를 픽셀 단위로 지정한다.
// 절대 좌표를 기준으로 왼쪽에서 value만큼 이동시킴
/* 함수를 이용하여 좌표 설정 */
$(selector).offset(function(index, currentoffset))
// index - 요소의 인덱스 위치를 반환
// currentoffset - 선택한 요소의 현재 좌표를 반환참고
https://github.com/sooojungee/TIL/blob/master/jQuery/180704.%5BjQuery%5D%20%EC%8A%A4%ED%81%AC%EB%A1%A4%20%EC%9B%90%ED%95%98%EB%8A%94%20%EC%9C%84%EC%B9%98%EC%97%90%20%EB%86%93%EA%B8%B0.md
https://inpa.tistory.com/m/entry/CSS-%F0%9F%8C%9F-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%B0%94Scrollbar-%EA%BE%B8%EB%AF%B8%EA%B8%B0-%EC%86%8D%EC%84%B1-%EC%B4%9D%EC%A0%95%EB%A6%AC
