CSS로 스크롤바 스타일 지정

CSS Scrollbars는 CSS에서 매우 간과되는 것입니다. 일반적으로 그들은 승인을 위해 레이아웃에 존재하지도 않으며, 존재하더라도 매우 별난 경우에만 눈에 띌 것입니다. 결국 좋은 스크롤바는 눈에 띄지 않는 것입니다.

그러나 이를 사용자 지정하면 웹사이트나 앱의 경험이 약간 향상될 수 있습니다. 특히 포함된 요소보다 더 큰 콘텐츠가 있는 경우 더욱 그렇습니다. 표준 브라우저 또는 운영 체제 스크롤 막대가 항상 미학적으로 만족스러운 것은 아닙니다.

이 기사에서는 CSS만 사용하여 모든 웹 사이트에서 사용자 정의 스크롤바를 구현하는 방법에 대한 약간의 팁을 제공합니다.

브라우저 엔진 및 제한 사항

스크롤 막대의 스타일을 지정하는 표준 방법은 아직 없습니다. 브라우저가 이 목표를 달성하는 가장 좋은 방법에 대한 합의에 도달하지 않았기 때문입니다. 현재 시장에는 Webkit, Blink 및 Gecko의 세 가지 HTML 엔진만 있습니다.

Webkit e Blink 엔진

Blink는 Webkit의 파생물이므로 스크롤 막대의 스타일을 지정하는 데 사용되는 방법은 동일합니다. Safari, Gnome Web 및 기타 잘 알려지지 않은 브라우저는 Webkit을 사용합니다. Google 크롬과 그 파생 제품인 Brave, Opera, Vivaldi 및 Edge는 모두 Blink를 사용합니다. 즉, 이 방법을 사용하면 사용자의 90% 이상을 다룰 수 있습니다.

이 방법은 CSS 의사 요소를 사용하여 다른 부분을 나타냅니다. 표준 CSS 사양에는 없으므로-webkit- 브라우저 접두사가 필요합니다.

다음은 요소입니다.

::-webkit-scrollbar : 일반적으로 너비 및 높이와 같은 일반적인 측면을 정의하는 데 사용되는 막대의 "본체"를 나타냅니다.

::-webkit-scrollbar-track : 스크롤 막대 트랙입니다.

::-webkit-scrollbar-thumb : 핸들 자체입니다.

이 외에도 다른 의사 요소가 있지만 그 사용은 매우 구체적이며 일반적으로 불필요합니다. 다음은 매우 신중한 스크롤 막대에 대한 코드의 예입니다.

.element::-webkit-scrollbar {
  width: 3px;
  height: 3px; /* The height is only seen on horizontal scrolling */
}

.element::-webkit-scrollbar-track {
  background: transparent;
  padding: 2px;
}

.element::-webkit-scrollbar-thumb {
  background-color: #000;
}

이 방법을 사용한 사용자 지정은 매우 강력하지만 인터넷 표준을 담당하는 기관인 W3C는 이 사양을 포기했습니다. 앞으로는 중단될 예정입니다.

게코

Gecko는 Firefox 및 그 파생 제품인 Librewolf, TOR Browser, SeaMonkey, Waterfox 및 IceCat에서 사용하는 렌더링 엔진입니다. Webkit 및 Blink 기반 브라우저와 달리 Gecko는 W3C 사양을 따릅니다. 의사 요소를 사용하는 대신 일반 CSS 규칙이 이 용도로 사용됩니다.

규칙은 다음과 같습니다.

scrollbar-width : 음... 스크롤 막대의 너비 또는 높이입니다.

scrollbar-color : 스크롤바 썸(첫 번째) 및 트랙(두 번째)의 색상.

.element {
  scrollbar-width: thin;
  scrollbar-color: black transparent;
}

이 방법은 훨씬 더 우아하지만 덜 강력합니다. 어떤 브라우저도 이 사양을 완전히 구현하지 않는다는 점에 유의해야 합니다. Webkit 기반 브라우저에서 이러한 규칙을 사용하려면 접두사-webkit-를 사용해야 합니다.

마무리

사양이 완성되지는 않았지만 CSS 스타일은 두 가지 방법을 모두 통합해야 합니다. 이를 통해 최종 코드는 다음과 같습니다.

.element {
  scrollbar-width: thin;
  scrollbar-color: black transparent;
}

.element::-webkit-scrollbar {
  width: 3px;
  height: 3px; /* The height is only seen on horizontal scrolling */
}

.element::-webkit-scrollbar-track {
  background: transparent;
  padding: 2px;
}

.element::-webkit-scrollbar-thumb {
  background-color: #000;
}

요소에서 스크롤 막대를 보려면 overflow[-x/-y]: scroll 규칙을 설정해야 합니다.

다음 기사에서 만나요!

연결

This article in Portuguese

CSS Scrollbar Styling - Can I Use

CSS Scrollbars - MDN

이 기사가 어떤 식으로든 도움이 되었다면 donating을 고려하십시오. 이것은 내가 이와 같은 더 많은 콘텐츠를 만드는 데 도움이 될 것입니다!