특정한 영역에서만 스크롤바를 다르게 하고싶다면

🐶어떻게 해야할까요?

이렇게 여러가지 종류의 스크롤바를 만드는 것이 요구사항입니다.

쉽게 생각해보자구요 스크롤바만드는 css 검색해보면 되죠

::-webkit-scrollbar 같은 속성들 건드리면 되는거아닐까요?

::-webkit-scrollbar-thumb {
  background-color: #4568dc 
  border-radius: 10px 
}

::-webkit-scrollbar-thumb는 스크롤바의 막대 자체의 스타일링을 지정합니다.

그러니 막대 자체를 파랑색으로 지정하고 border-radius를 10px로 줘서 둥글둥글하게 만드는 코드입니다.

그러나 동작하지 않습니다.

::-webkit-scrollbar 에도 background-color를 설정해주면 동작합니다.

::-webkit-scrollbar-thumb {
  background-color: #4568dc 
  border-radius: 10px 
}

::-webkit-scrollbar {
  background-color:white
}

원래는 여기서 끝이지만

만약 우리의 목표처럼 여러개의 스크롤바 스타일을 만들고 싶다면 어떨까요?

그럴 땐 앞에 클래스나 아이디 선택자를 주는 방법이 있습니다.

.content::-webkit-scrollbar-thumb {
  /* background: linear-gradient(to right, #4568dc, #b06ab3); */
  background-color: #4568dc !important;
  border-radius: 10px !important;
  /* 스크롤바 둥글게 설정    */
}

.content::-webkit-scrollbar {
  background-color: inherit;
}

이제 이 선택자를 원하는 영역에 적용시키는 것이지요

그런데 여기서 주의할 점이 있습니다.

바로 스크롤바의 스타일을 적용하고자 하는 영역에 바로 적용하는 게 아니라

그 부모요소에 적용시켜야 제대로 적용된다는 것입니다.

이해를 돕기 위해 코드의 형태로 보겠습니다.

사용된 css는 pandacss이지만 무리없이 이해하실 수 있을 것입니다.

import { css } from '@/styled-system/css';
import { circle, hstack } from '@/styled-system/patterns';
import Component from './_components/Component';

export default function Home() {
  return (
    <div className="">
      <main
        className={`${css({
          w: 500,
          h: 400,
          display: 'flex',
          overflow: 'scroll',
        })} content`}
      >
        <div className={circle({ size: 24, overflow: 'hidden' })}></div>
        <div
          className={hstack({ gap: 4 })}
          style={{
            scrollbarColor: 'red',
          }}
        ></div>
        <div
          className={`${css({
            w: '40px',
            h: '20px',
          })}`}
        >
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads dsadsads
          dsadsads dsadsads dsadsads dsadsads dsadsads
        </div>
      </main>
      <div
        className={css({
          height: 2000,
          w: 1200,
        })}
      >
        dsa
      </div>
    </div>
  );
}

dsadsads가 잔뜩 도배된 div 박스의 스크롤바를 변경하고 싶다면

div 박스의 부모요소인 main 태그에 content 클래스를 부여합니다.

그러면 원래 의도했던대로 특정 영역만 스크롤바의 스타일을 변경할 수 있어요!

---

🐧 마치며

css는 쉽다가도 어렵고 어렵다가 쉽..아니 그냥 어려워요