대화형 그래디언트 스크롤 막대를 만드는 방법

저는 최근에 프로젝트를 위한 새로운 디자인을 구현하는 작업을 하고 있었습니다. 사이트 브랜딩은 크게 두 가지 색상이 있었고, 디자인에는 없지만 스크롤바 배경을 기본 브랜딩 색상으로 바꿔야겠다고 생각했습니다.

기본 브라우저 스크롤바보다는 나았지만 더 좋게 만들고 싶다는 생각이 들었습니다. 그래서 두 가지 브랜딩 색상을 사용하여 그라데이션 스크롤바를 만들기로 했습니다. 하지만 이 그라데이션 배경의 스크롤 썸을 사용하는 것만으로는 충분하지 않았습니다. 그래서 더 인터랙티브하게 만들기로 결정했습니다.

내 아이디어는 스크롤할 때 기본 색상에서 시작하여 보조 브랜딩 색상으로 끝나는 스크롤 썸 배경이 변경되어야 한다는 것입니다.

이것이 내가 한 방법입니다. 이것은 물론 WebKit 브라우저에서만 작동합니다.

먼저 기본 스크롤바를 볼 수 있습니다.



나는 그것에서 단색 스크롤 엄지 만 갖는 것으로 변경했습니다.

:root {
  --primary: #007ac3;
  --secondary: #d2232a;
}

::-webkit-scrollbar {
  width: 13px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 10px;
  border: 3px solid #fff;
}

다음 단계는 그라디언트를 만드는 것입니다. 그라데이션 배경을 스크롤 트랙으로 설정했습니다.

:root {
  --primary: #007ac3;
  --secondary: #d2232a;
}

::-webkit-scrollbar {
  width: 13px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(
    to bottom, 
    var(--primary), 
    var(--secondary)
  );
  border-radius: 10px;
}

그런 다음 그라데이션 배경을 표시하기 위해 "구멍"이 있는 스크롤 썸을 만들려고 했습니다.

:root {
  --primary: #007ac3;
  --secondary: #d2232a;
}

::-webkit-scrollbar {
  width: 13px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(
    to bottom, 
    var(--primary), 
    var(--secondary)
  );
  border-radius: 0 10px 10px 0;
}

::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 10px;
  border: 3px solid #fff;
}

이제 빠진 유일한 것은 스크롤 트랙의 나머지 부분을 숨기는 것입니다. 이를 위해 스크롤 썸에 정말 큰 아웃라인을 사용했습니다.

:root {
  --primary: #007ac3;
  --secondary: #d2232a;
}

::-webkit-scrollbar {
  width: 13px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(
    to bottom, 
    var(--primary), 
    var(--secondary)
  );
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 10px;
  border: 3px solid #fff;
  outline: 99999px solid #fff;
}

그리고 이것이 최종 결과입니다



이 작은 팁이 마음에 드셨다면 친구들과 공유하세요…