[javascript] CSS scroll indicator (수평 스크롤바)

참고: https://css-tricks.com/books/greatest-css-tricks/scroll-indicator/

JavaScript를 쓰지 않고 사용자가 페이지를 얼마나 스크롤 했는지 보여주는 진행 표시줄을 만드는 방법이 있습니다. 그래디언트와 포지셔닝을 잘 사용해서 말입니다.

이미 스크롤 위치를 표시하는 빌트인 브라우저 기능이 있습니다. 우측에 표시되는 스크롤 막대로 아주 잘 작동합니다. 또한 이 스크롤 바 스타일을 바꾸는 표준화된 방법까지도 있습니다.

body {
  --scrollbarBG: #CFD8DC;
  --thumbBG: #90A4AE;

  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

여기에 최상의 브라우저 호환을 위해 -webkit- 스타일도 사용할 수 있습니다.

예를 들어:

See the Pen scroll indicator 1 by shinyks (@shinyks) on CodePen.

하지만 스크롤 바 스타일을 지정하는 것 말고 사용자가 스크롤 바를 얼마나 아래로 스크롤 했는지 표시하는 자체 표시기를 만들고 싶다고 가정해 보겠습니다. 글을 점점 다 읽어갈 수록 프로그래스 바가 채워지는 것 처럼 말입니다.

Mike Riethmuller는 매우 영리한 방법을 발견했습니다.

See the Pen scroll indicator 2 by shinyks (@shinyks) on CodePen.

이는 영리할 뿐만 아니라 아주 적은 코드로 이루어집니다. 작동 방법의 이해를 위해 헤더와 linear-gradient를 사용한 body의 배경색을 제거해 보겠습니다.

각 요소의 배경색을 제거하니 문서 끝까지 대각선이 그려져 있습니다. 이 쯤에서 어떤 일이 벌어진건지 알아챌 수 있습니다. 페이지를 아래로 스크롤하면 헤더와 바디 사이의 틈이 파란색으로 점점 더 채워집니다. 그래서 헤더와 바디 사이를 몇 픽셀 떨어트려 배치한 것 입니다.

아마도 가장 영리한 부분은 그라데이션 배경의 크기를 어떻게 조정하느냐 하는 것 입니다. 단순하게 배경 전체에 대각선을 그리면 된다고 생각할 수도 있는데 그러면 그라데이션이 페이지의 마지막 끝 부분에서 끝나기 때문에 스크롤을 끝까지 내려도 헤더와 바디 사이의 틈이 가득 차지 않게됩니다. 그러므로 대각선은 페이지의 맨 아래 길이보다 viewport 높이만큼 짧아야 합니다. 이를 코드로 쓰면 다음과 같습니다:

background-size: 100% calc(100% - 100vh);

좀더 완벽한 프로그래스 바를 위해 대각선을 그릴 때 헤더의 높이도 빼야 합니다. 결국 코드에 꽤 많은 매직넘버가 있는 것 처럼 보일 수도 있지만 대부분이 유기적으로 연관되어있기 때문에 그다지 매지컬하지 않습니다. 다음은 여러 속성을 바꿀 수 있도록 커스텀 속성을 가지고 있는 코드입니다.

See the Pen scroll indicator 3 by shinyks (@shinyks) on CodePen.

왜 이렇게 해야하는지?

• 재미있으니까
• 어떤 브라우저는 스크롤바가 없기 때문(think mobile, macOS에 "스크롤 할 때만 스크롤 보이기" 설정일 때)