CSS를 사용하여 스크롤 막대를 스타일 지정하는 방법

반응형

이 글은 원래 제 개인 블로그에 게재된 글입니다.

스크롤 바는 일반적으로 웹 사이트를 보는 브라우저나 운영 체제에 기반하여 스타일링됩니다. 이것은 웹 사이트의 스크롤 막대가 플랫폼 전체에 걸쳐 통일된 모양을 가질 수 없음을 의미합니다. 이것은 일반적으로 괜찮지만, 사용자가 어떤 브라우저를 사용하든 상관없이 보기 좋은 스크롤바를 가지고 있는 것은 멋집니다!

그러나 CSS에서는 스크롤바를 스타일링하는 것이 까다로울 수 있습니다. 유사 요소 선택기를 사용해야 합니다.

이 문서에서는 CSS로 스크롤 막대를 스타일링하는 방법과 사용해야 하는 의사 요소 선택기에 대해 알아봅니다.

 

유사 요소 선택 호환성

이 튜토리얼에 언급된 유사 요소 선택기는 웹킷 브라우저에서만 작동합니다. 그래서, 그것은 크롬과 사파리 같은 대부분의 최신 브라우저에서 작동할 것이다.

그러나 파이어폭스에서는 작동하지 않을 것이다. 또는 스크롤 막대 너비 및 스크롤 막대 색상 특성을 사용할 수 있습니다.

::-웹킷-모음줄

이 유사 요소 선택기는 스크롤 막대를 사용자 지정할 때 사용해야 하는 기본 선택기입니다. 스크롤 막대의 너비를 지정하는 데 사용됩니다.

 

이 선택기가 특정 요소(전체 페이지의 스크롤 막대가 아님)에서 사용되는 경우 오버플로: 스크롤; 요소를 지정해야 합니다. 그렇지 않으면 스크롤 막대가 표시되지 않습니다.

다음 스타일을 적용하여 페이지 스크롤 막대의 너비를 설정하십시오.

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

이것을 사용해보면 스크롤 바가 나타나지 않는다는 것을 알 수 있을 것이다. 스크롤 막대 트랙 또는 핸들의 배경색을 추가해야 하기 때문입니다.

::-webkit-controlbar-control

 

이 유사 요소 선택기를 사용하여 스크롤 막대의 엄지손가락 스타일을 지정할 수 있습니다. 이것은 페이지를 스크롤하기 위해 끌 수 있는 부분을 의미합니다.

예를 들어, 이 선택기를 사용하여 배경을 빨간색으로 만들고 테두리 반지름을 지정할 수 있습니다.

::-webkit-scrollbar-thumb {
      background: #ef4444;
      border-radius: 20px;
}

::-웹킷-바-트랙

 

이 유사 요소 선택기를 사용하여 트랙의 스타일을 지정할 수 있습니다. 이것은 엄지손가락 아래에 있는 부분입니다.

사용할 수 있는 또 다른 유사 요소 선택기는 ::-webkit-scrollbar-track-piece이다. ::-웹킷-스크롤바-트랙 피스는 ::-웹킷-스크롤바-트랙보다 높은 레이어에 있습니다.

예를 들어, 트랙에 배경색을 추가하는 데 사용할 수 있습니다.

::-webkit-scrollbar-track {
      background-color: #fca5a5;
}

 

::-웹킷-바-버튼

이 옵션을 사용하여 위쪽 및 아래쪽(또는 수평 스크롤 막대의 경우 왼쪽 및 오른쪽) 단추 스타일을 지정할 수 있습니다.

이렇게 하면 모든 스크롤바 버튼에 스타일이 적용됩니다. 이는 가로 스크롤바 버튼과 세로 스크롤바 버튼 모두에 스타일링을 적용한다는 것을 의미합니다.

특정 단추에 특정 스타일을 적용하려면 다음과 같이 하십시오.

• ::-webkit-interbar-button:interest:start: 세로 스크롤 막대의 위쪽 버튼용입니다.
• ::-webkit-intervar-button:end: 세로 스크롤 막대의 아래 버튼용입니다.
• ::-webkit-intervar-button:interval:start: 이것은 가로 스크롤 막대의 왼쪽 버튼에 대한 것입니다.
• ::-웹킷-바-버튼:기본:끝: 이것은 가로 스크롤바의 오른쪽 버튼에 대한 것입니다.

 

또한 각 버튼에는 :인상 및 :인상 선택기가 있습니다.

이 예에서는 세로 스크롤 막대의 단추에 스타일을 추가합니다.

::-webkit-scrollbar-button {
      display: block;
      background-color: #b91c1c;
      background-repeat: no-repeat;   
      background-size: 50%;
          background-position: center;
}

::-webkit-scrollbar-button:vertical:start:increment {
      background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/7e/Chevron-up.svg');   
}

::-webkit-scrollbar-button:vertical:start:decrement {
      display: none;
}

::-webkit-scrollbar-button:vertical:end:increment {
      display: none;
}

::-webkit-scrollbar-button:vertical:end:decrement {
      background-image: url('https://upload.wikimedia.org/wikipedia/commons/e/ee/Chevron-down.svg');   
}

::-webkit-scrollbar-button의 속성이 모든 스크롤 막대 단추에 적용됩니다. 예에서는 배경색을 추가합니다. 또한 일부 브라우저나 운영 체제에서 기본적으로 숨겨져 있을 수 있으므로 디스플레이를 차단으로 설정했습니다. 마지막으로 배경 이미지를 사용하여 위쪽과 아래쪽 아이콘을 표시하기 때문에 배경 관련 속성을 추가합니다.

::-webkit-scrollbar-button:vertical:start:increment Selector는 세로 스크롤 막대의 위쪽 단추의 증분 부분을 대상으로 합니다. 저는 아이콘을 배경 이미지로 보여주기 위해 사용합니다.

 

::-webkit-scrollbar-button:vertical:start:decrement 선택기는 세로 스크롤 막대의 위쪽 단추의 감소 부분을 대상으로 합니다. 위쪽 버튼은 필요 없기 때문에 감소 부분을 숨기기 위해 사용합니다.

::-webkit-scrollbar-button:vertical:end:increment Selector는 세로 스크롤 막대의 아래 단추의 증분 부분을 대상으로 합니다. 아래 버튼은 필요 없기 때문에 증분 부분을 숨기기 위해 사용합니다.

::-webkit-scrollbar-button:vertical:end:decrement 선택기는 세로 스크롤 막대의 아래쪽 단추의 감소 부분을 대상으로 합니다. 저는 아이콘을 배경 이미지로 보여주기 위해 사용합니다.

 

::-webkit-controlbar-control

이 유사 요소 선택기는 세로 스크롤 막대와 가로 스크롤 막대 사이의 공간에 스타일을 지정하는 데 사용됩니다.

예를 들어, 다음과 같이 다른 배경색을 설정할 수 있습니다.

::-webkit-scrollbar-corner {
      background-color: #7f1d1d;
}

 

결론

스크롤바는 이러한 유사 요소 선택기를 사용하여 웹 사이트에서 쉽게 스타일을 지정할 수 있습니다. 웹 사이트가 열려 있는 플랫폼에 관계없이 웹 사이트의 모양과 느낌과 일치하도록 스타일을 지정할 수 있습니다.

앞서 언급한 바와 같이, 이 선택기들은 웹킷 브라우저에서만 동작한다. 자세한 내용은 MDN의 브라우저 호환성 표를 참조하십시오.