CSS | 스크롤바의 원리, 투명한 스크롤바 만들기

Ryan·2020년 10월 25일
0

CSS

목록 보기
12/13
post-thumbnail

간혹 스크롤은 되는데 스크롤바가 없는 것을 볼 수 있다.
사실 복잡한 기능이 아니고 CSS 속성만으로도 구현할 수 있다.

1. 스크롤바가 생성되는 원리

: 내가 만든 컨테이너의 크기보다 넘치는 양의 컨텐트를 넣었을때 컴퓨터는 이 컨텐트를 컨테이너 밖까지 내보내게 된다.
아무런 설정이 없는 경우, 컨테이너를 넘쳐 버리게 되지만 스타일 설정에 따라 넘친 부분에 효과를 줄 수 있다.

.textBox {
  text-overflow: hidden;
}
.imgBox {
  overflow: hidden;
  • 컨테이너 내부의 텍스트가 넘칠 경우 숨기도록 설정할 수도 있다. 그 경우 넘치는 부분만 잘라서 숨긴다.
  • 아무런 정렬 기준이 없어서 좌측 상단에 정렬이 되어있다면 우측 하단이 잘려나가게 될 것이다.
    (보이지 않는다는 표현이지 원본 이미지가 잘리거나 하지는 않는다)
.scrollbar {
  overflow-x: auto;
}
  • 또는 x축(또는 y축)을 스크롤바를 만들어 스크롤에 따라 모두 보이게 만들 수도 있다.
  • x 대신 y를 입력하면 y축으로 넘친 컨텐츠를 스크롤바로 만들어 줄 것이다.

2. 투명한 스크롤바 만들기

: 사실 너무 쉽다.

::-webkit-scrollbar {
  display: none;
}

아주 간단하다.
Webkit은 다음에 다뤄보도록 하고 일단 이렇게 스크롤바를 끄면 끝난다.
(Webkit이란 크롬과 사파리에서 작용하는 코드이므로 익스플로러라면 ms를 이용하자)

아무튼 이것만 넣으면 끝!

profile
"꾸준한 삽질과 우연한 성공"

0개의 댓글