10줄의 CSS를 사용하여 스크롤 시 그라데이션이 변경되는 스크롤바 만드는 방법 🚀

소개

CSS 의사 요소 세트를 사용하여 웹 사이트에서 스크롤 막대를 사용자 정의할 수 있다는 것을 알고 계실지 모르지만 CSS로만 스크롤할 때 변경되는 그래디언트 스크롤 막대를 만드는 특별한 트릭을 사용할 수 있다는 것을 알고 계셨습니까?

최종 결과는 아래의 codepen과 같아야 합니다. 그 뒤에 있는 CSS는 복잡하지 않으며 10(+ 2 빈) 코드 행으로만 구성됩니다. 직접 마법을 발견하고 싶다면 코드펜을 참조하세요. 그렇지 않으면 이 작업을 수행하기 위해 어떤 트릭을 수행했는지 계속 읽으십시오. 😎

참고: 기본 스크롤 막대가 표시되면 스크롤 막대 의사 요소를 지원하는 브라우저를 사용하고 있는지 확인하십시오(모든 Webkit 기반 브라우저는 괜찮습니다).



다음과 같은 의사 요소를 사용합니다.

::-웹킷-스크롤바

::-웹킷-스크롤바-트랙

::-웹킷-스크롤바-썸

그러나 스크롤 막대의 의사 요소 방문MDN의 전체 목록을 보려면 몇 가지 더 사용할 수 있습니다.

코드

스크롤 너비를 설정하기 위해 첫 번째 의사 요소::-webkit-scrollbar부터 시작하겠습니다. 따라서 CSS에서는 다음과 같이 표시됩니다.

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

다음으로 원하는 그라디언트를 추가할 것입니다(이 편리한 도구https://cssgradient.io/를 사용하여 그라디언트를 만들 수 있습니다).

그라데이션이 준비되었나요? 따라서 배경 속성으로 ::-webkit-scrollbar-track 의사 요소에 추가하십시오. 이렇게 하면 스크롤바가 그라디언트로 덮이게 됩니다.

::-webkit-scrollbar-track {
  background:  linear-gradient(0deg, rgba(255, 0, 0, 1) 0%, rgba(7, 0, 211, 1) 100%);
}

트릭

이제 가장 중요한 단계는 스크롤 핸들(썸 가상 요소라고 함)을 사용자 지정하는 것입니다. 먼저 썸에 단색 배경색을 추가해 보세요.

::-webkit-scrollbar-thumb {
  background: lime;
}

녹색의 일반적인 스크롤 막대 핸들이 표시됩니다. 완벽한. 이제 투명하게 만들어 보겠습니다. 따라서 background: transparent; 또는 opacity: 0; 를 사용하십시오.

우리는 지금 그것을 볼 수 없지만 그것이 거기에 있다는 것을 알고 그것을 통해 그라디언트를 볼 수 있습니다. 좋습니다! 따라서 우리가 해야 할 일은 모든 외부 공간을 단색으로 렌더링하는 것입니다. 어떻게 하죠?
box-shadow 속성을 사용하여! box-shadow 속성이 무엇으로 구성되어 있는지 새로고침해 보겠습니다.

.box {
  box-shadow: 0px 0px 4px ??? black;
}

0px: 가로(x축) 오프셋

0px: 세로(y축) 오프셋

4px: 흐림

???: 사용할 비밀 속성

검은색: 상자 그림자 색상

네 번째 숨겨진 속성은 스프레드라고 하며 상자 그림자의 크기를 늘리거나 줄이는데 완벽합니다! 블러가 없는 엄청난 값으로 설정하면 스크롤바 핸들 주변의 모든 공간을 덮게 됩니다. 그것이 바로 우리가 원하는 것입니다! 코드에서 시도해 봅시다!

전체 스크롤 막대를 덮도록 큰 값을 지정했는지 확인하십시오.

::-webkit-scrollbar-thumb {
  background: transparent;
  box-shadow: 0px 0px 0px 100000vh black;
}

이제 작업이 끝났고 스크롤 막대 그래디언트가 스크롤 시 어떻게 변경되는지 확인할 수 있습니다. 전체 원리는 핸들을 통해 스크롤 막대의 그라데이션 배경을 보는 아이디어에 따라 작동합니다. 그리고 솔리드 컬러로 외부 공간을 모두 커버해줘서 너무 멋져요 😎

함께 구성된 코드는 다음과 같습니다.

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

::-webkit-scrollbar-track {
  background:  linear-gradient(0deg, rgba(255, 0, 0, 1) 0%, rgba(7, 0, 211, 1) 100%);
}

::-webkit-scrollbar-thumb {
  background: transparent;
  box-shadow: 0px 0px 0px 100000vh black;
}

큰 크레딧 👏

저는 box-shadow를 사용하여 이 깔끔한 트릭을 생각해내지 못했습니다. 모든 크레딧은 Twitch에서 스트리밍하는 놀라운 웹 개발자인 James Warner에게 가야 합니다.


.ltag__user__id__299210 .follow-action-button {
배경색: #19063A !중요;
색상: #dce9f3 !중요;
border-color: #19063A !중요;
}

제임스 워너

Surely go check him out! He is currently developing an astonishing personal website using WebGL, React, Next.js and Sanity.io! Just see a snippet of his progress below:

스크린샷 자체는 멋져 보이지만 실제 작동을 확인하십시오here.