일반 CSS에서 사이트에 대한 아름다운 사용자 지정 스크롤 막대를 만드는 방법

JavaScript, CSS 및 거의 모든 프로그래밍에 대한 블로그인 원래 게시됨here at xtrp.io.

웹의 사용자 지정 스크롤바는 사이트나 디자인을 돋보이게 만들 수 있습니다. 특정 색상이든 특정 스타일이든 사이트의 주요 디자인 측면을 묘사하는 데 도움이 될 수 있습니다.

예를 들어 Outlook.com의 웹 앱에 있는 스크롤 막대는 매우 미니멀한 스타일을 나타냅니다. CSS-Tricks ' 스크롤 막대에 시그니처인 주황색 및 분홍색 모양이 표시됩니다.



이 게시물에서는 Outlook.com 웹 앱과 유사한 최소한의 사용자 지정 스크롤 막대를 만들 것입니다.

최종 결과를 보려면 the Codepen for this을 확인하십시오.

1. HTML 및 CSS 설정

스크롤할 요소인 자리 표시자 텍스트가 있는 기본 컨테이너 요소부터 시작하겠습니다. 내가 이것을 위해 쓴 디자인은 청회색 색상 팔레트로 최소화되었습니다.

<div class="container custom-scrollbar">
  <h1>Try Scrolling!</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa sapiente expedita aperiam iste suscipit cum voluptates voluptatibus facilis incidunt perferendis dolore iure iusto, minima culpa id velit consequatur quae?</p>
  <!-- more placeholder text here (omitted for brevity) --> 
</div>

* {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  box-sizing: border-box;
}
body {
  height: 100vh;
  background-color: #ecf0f1;
  padding: 1.5rem;
  margin: 0;
}
.container {
  background-color: #fdfdfd;
  height: 100%;
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 4px 28px rgba(123,151,158,.25);
  border: 1px solid #d6dee1;
  padding: 1rem;
  overflow: scroll;
}

이것은 다음과 같이 보입니다.

2. 스크롤바 컨테이너 및 트랙 만들기

스크롤바 컨테이너부터 시작하겠습니다. 스크롤 막대 컨테이너는 트랙(전체 높이에 걸쳐 있음) 및 드래그 가능한 스크롤 막대 썸을 포함하여 전체 스크롤 막대를 포함합니다.

웹킷 의사 선택기::-webkit-scrollbar를 통해 선택되며 자체적으로 사이트의 모든 스크롤바를 선택합니다. 선택기에서 접두사로 요소를 추가하면 해당 특정 요소의 스크롤바만 선택할 수 있습니다. 예: .container::-webkit-scrollbar . 이는 곧 사용할 다른 모든 스크롤바 속성과 동일합니다.

스크롤 막대 컨테이너는 주로 다음과 같이 전체 스크롤 막대의 너비를 사용자 지정하는 데 사용됩니다.

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

다음으로 ::webkit-scrollbar-track 선택기를 사용하는 트랙을 사용자 지정하겠습니다.

참고: 스크롤 막대 선택기는 제한되어 있으며 padding , margin , transition 등과 같은 여러 CSS 속성을 제대로 지원하지 않습니다. 이러한 속성 중 하나에 대한 주요 해결 방법을 곧 설명하겠습니다.

트랙은 스크롤되는 요소의 전체 높이에 걸쳐 있습니다. 스타일 지정은 일반적으로 배경색을 변경하는 것을 의미합니다. 미니멀한 디자인을 유지하면서 지금은 트랙을 투명하게 유지하고 스크롤바 썸(사용자가 클릭하고 드래그하는 스크롤바 부분)만 표시하도록 선택합니다.

::-webkit-scrollbar-track {
  background-color: transparent;
}

3. 스크롤바 썸 만들기

이제 가장 중요한 부분인 스크롤바 썸입니다. 내가 언급했듯이 스크롤바 썸은 사용자가 클릭하고 드래그하는 스크롤바의 주요 부분입니다. ::-webkit-scrollbar-thumb 선택기에 의해 선택됩니다.

스타일링을 시작하기 위해 사용 중인 일반 색상 팔레트에 맞게 밝은 회색 배경을 추가합니다.

::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
}

다음으로 다른 요소와 마찬가지로 border-radius 속성을 사용하여 둥근 모서리를 추가해 보겠습니다.

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

스크롤 막대 선택기가 실제로 패딩 속성을 지원하지 않기 때문에 썸에 패딩을 추가하는 것은 까다롭습니다.

여기서 해결 방법은 패딩 대신 투명 테두리를 추가하고 background-clip: content-box 문을 사용하여 요소의 너비와 높이 내부에 테두리가 포함되도록 하는 것입니다.

::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

다음은 거의 완료된 스크롤바의 모습입니다.



디자인과 잘 어울리죠?

4. 호버 효과 추가

마지막으로 스크롤 막대 썸에 호버 효과를 추가해 보겠습니다. 안타깝게도 transition 속성은 대부분의 브라우저에서 스크롤 막대에 대해 지원되지 않으므로 여기서는 옵션이 아닙니다.

따라서 대신 어떤 종류의 전환 없이 마우스를 가져갔을 때 스크롤 막대 썸을 약간 더 어둡게 만들어 보겠습니다.

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

스크롤바가 완성되었습니다!

다음은 final Codepen입니다.



작성 당시 사용자 정의 스크롤 막대는 IE11을 포함한 모든 주요 브라우저에서 지원됩니다. 사용자 정의 스크롤 막대의 브라우저 지원에 대한 자세한 내용은 Can I Use Page을 참조하십시오.

이 게시물이 마음에 들었고 사용자 지정 스크롤 막대를 만드는 데 유용했기를 바랍니다.

스크롤해주셔서 감사합니다.

이 게시물의 출처는 my blog at xtrp.io 입니다.

— 가브리엘 로무알도

참고: 이전에는 Fred Adams라는 가명으로 썼습니다.